学习canvas

双圆demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;padding: 0;
        }

        .box{
            text-align: center;
        }
        #myCanvas{
            background: #eee;
        }
    </style>
</head>
<body>
   <div class="box">
        <canvas id="myCanvas" height="400" width="400"></canvas>
   </div>
<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");

cxt.fillStyle="green";
cxt.beginPath();
cxt.arc(200,200,190,0,Math.PI,false);
cxt.closePath();
cxt.fill();

cxt.fillStyle="#fff";
cxt.strokeStyle='red'
cxt.beginPath();
cxt.arc(200,200,180,0,Math.PI*2,true);
cxt.closePath();
cxt.stroke();
cxt.fill();


</script>
</body>
</html>

1、dom.getContext('2d')

2、fillStyle 填充颜色

lineWidth 线条宽度 cxt.lineWidth='10'

3、strokeStyle 线条颜色

4、beginPath() 开始一条路径，或重置当前的路径

　 closePath()从当前点到开始点的路径

5、fill填充当前绘图（路径）、stroke绘制已定义的路径

6、arc(x,y,r,sAngle,eAngle,counterclockwise);画圆

参数	描述
x	圆的中心的 x 坐标。
y	圆的中心的 y 坐标。
r	圆的半径。
sAngle	起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle	结束角，以弧度计。
counterclockwise	可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

7、moveTo(x,y) 定义线条开始坐标

lineTo(x,y) 定义线条结束坐标

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

8、fillRect(x,y,width,height); X、Y为坐标,左上角

　　fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。

　　提示：请使用fillStyle属性来设置用于填充绘图的颜色、渐变或模式。

　　strokeRect 绘制无填充的矩形.
10、clearRect(x,y,width,height);清除矩形9、rect(x,y,width,height);

参考网址:http://www.w3school.com.cn/tags/html_ref_canvas.asp

猜你喜欢