canvas练习语句

应用canvas需要getContext方法

列： var ctx = document.getElementById('myCanvas').getContext('2d');

填充矩形：

ctx.fillStyle = '#faa';

ctx.fillRect(300,100,200,50);//第一个参数 x坐标，第二个参数 y坐标，第三，第四，分别是宽高

填充圆形：

ctx.fillStyle = '#fff';

ctx.arc(100,100,100,0,2 * Math.PI);//园，一二参数是xy，第三个是直径，四是开始弧度位置0是最右点，五是弧度

ctx.fill();//填充

边框矩形：

ctx.strokeStyle = '#faa';//边框颜色
ctx.rect(75,75,50,50);
ctx.stroke();//线型

边框圆形：

ctx.beginPath();
ctx.lineWidth = '30';//边框宽度
ctx.rect(225,75,50,50);
ctx.fill();//填充