canvas标签的用法

canvas标签:

1,canvas是HTML5提供的一个标签，可以在这个盒子区域绘画。

2，如何在canvas里面进行绘画呢？

(1)在HTML页面中添加canvas元素，必须定义id以方便调用；

<canvas id="canvas1"></canvas>

(2)使用id寻找寻找cancas属性，在javascript代码中使用

var canvas=document.getElementById("canvas");

(3)通过canvas元素的getContext方法来获取允许绘画的2D环境；

var pen=canvas.getContext("2d");

3.设置宽高

var canvas=document.getElementById("canvas");

canvas.width=600;

canvas.height=600;

4.获取画笔的方法:

var pen=canvas.getContext("2d");

5.合并：不用写最后一条线的轨迹，直接从终点连接到起点；

pen.closePath();

6.轨迹的颜色(不写默认黑色)：

pen.strokeStyle="rgb(149,134,255)";

7.轨迹的宽度:

pen.lineWidth=20;

8.填充的颜色：

pen.fillStyle="rgb(255,0,0)";

9.填充(只有封闭的轨迹填充才有效果，不写默认不填充，写了默认黑色)

pen.fill();

10.沿着轨迹绘制（ 只有轨迹是不行的，这一步才是真的绘制 ）

pen.stroke();

11.新轨迹起点：

pen.beginPath();

12.弧线：

pen.arc(x,y,r,起始角度，结束角度，逆顺时针);

tips: x,y是圆心坐标， r是半径 角度写弧度值Math.PI

13.文字

(1)文字样式：

pen.font = "30px  Verdana, Geneva, sans-serif";

(2)绘制文字

pen.fillText("文字内容",x,y); //x,y为该绘制点的坐标

(3)矩形

pen.fillRect(x,y,w,h);

x,y为绘制的起点 ； w,h 为宽高

(4)清屏有两种方式：

a:pen.clearRect(x,y,w,h);

b:canvas.width=canvas.width;//重新给画布设置宽度，整个界面就清除了，也可以达到清除的效果；