Canvas入门篇（一）

HTML5的核心功能Canvas

一、

         使用Canvas画图的前提是先在HTML5网页中使用Canvas定义一个 画布；

<canvas id="myCanvas" height= xxx  width=>浏览器不支持Canvas提示语</canvas>

id为Canvas标识ID，Canvas画布宽度高度，单位PX;

二、

        在JS中调用Canvas API，在定义的画布中绘画要先用JS获取Canvas对象；

var c = document.getElementById(“myCanvas”)

c即为myCanvas对象

三、

获得myCanvas对象的2d渲染上下文

var ctx = c.getContext("2d");

四、

了解坐标X,Y 左上角为0,0；X向右为+正，y向下为+正；

颜色，用RGB、16进制字符、颜色关键字如red，black等；

      

五

（1）画直线。

ctx.beginPath(); //调用beginPath()方法，开始绘画；
ctx.moveTo(x,y)；//调用moveTo()方法将坐标移至直线起始点；（x和y为 起为点坐标）
ctx.lineTo(x,y);//调用lineTo()方法绘制直线；（x和y为终点坐标）
ctx.stroke();//调用stroke()方法绘制图形边界轮廓，关闭绘图路径；

（2）画三角形

ctx.bginPath();
ctx.moveTo(10,10);
ctx.lineTo(10,100);
ctx.lineTo(100,100);
ctx.lineTo(10,10);
ctx.stroke();

(3)画圆形or圆弧

arc( x , y , r , sAngle , eAngle , counterclockwise );

x 圆中心 x 坐标。

y 圆中心 y 坐标。

r 圆半径。

sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。

eAngle 结束角，以弧度计。圆的结束角度为2*Math.PI;(Math.PI 代表π，也就是3.1415926,1π=180°，2π=360°)

counterclockwise 可选参数。False = 顺时针画图，true = 逆时针画图。

ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();

（4）画矩形

rect(x,y,width,height);矩形左上角X,Y坐标；矩形宽度，矩形高度；

strokeRect(x,y,width,height);同上，与rect不同是，不需要调用beginPath和strok方法即可画图；

fillRect(x,y,width,height);字面意思很好理解，fill填充，同上strokeRect，默认填充黑色；fillstyle可指定填充图形内颜色；如ctx.fillstyle="red";

clearRect(x,y,width,height);clear清除，清除左上X,Y坐标 ，宽度，高度 的矩形；

ctx.fillRect(20,20,100,50);
ctx.fillstyle="#000066"
ctx.clearRect(40,40,60,10);

未完待续......