html5 canvas实训报告,学习笔记：HTML5 Canvas（一）

最近在学习HTML5 Canvas，这里记录一些基础方法的总结：

HTML5中的canvas元素是作为2D渲染上下文的包装器，它包含绘图的图形操作所需要的全部方法和功能。

· 访问2D渲染上下文：

var canvas = $('#Canvas');

var context = canvas.get(0).getContext("2d");

· 绘制矩形并填充颜色：

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

该方法设置填充的颜色，赋值可以是任何有效的CSS颜色值；

context.fillRect(0, 0, 100, 100);

该方法接收四个参数：前两个参数是原点(左上角)的(x，y)坐标值，后两个参数是矩形的宽度和高度；

· 绘制矩形边框：

context.strokeRect(0, 0, 100, 100);

参数设置与fillRect()方法一样；

· 绘制线条：

context.beginPath();    //开始路径

context.moveTo(10, 10);    //设置路径原点

context.lineTo(100, 10);    //设置路径终点

context.closePath();    //结束路径

context.stroke();    //绘制路径轮廓

· 绘制圆形：

context.beginPath();    //开始路径

context.arc(100, 100, 50, 0, Math.PI*2, false);

context.closePath();    //结束路径

context.fill();    //填充路径

该方法接收六个参数：前两个为原点坐标，第三个参数为半径大小，第四个参数为开始角度，第五个参数为结束角度，第六个参数为绘制方向(逆时针为true，顺时针为false)；

· 清除canvas：

context.clearRect(0, 0, 100, 100);

该方法参数设置和fillRect相同，表示擦除的矩形区域；

· 保存绘图状态：

context.save();

· 恢复绘图状态：

context.restore();

· 平移：

context.translate(100, 100);

该方法接收两个参数，为平移坐标，表示把2D渲染上下文的原点移动多远(即加上原点的坐标)；

· 缩放：

context.scale(2, 2);

该方法接收两个参数，分别为x，y方向的缩放倍数；

· 旋转：

context.rotate(Math.Pi/4);

该方法是把2D渲染上下文绕其原点进行旋转指定的弧度。