Canvas 练习笔记

时间：2017-02-25 15:42:41 阅读：107 评论：0 收藏：0 [点我收藏+]

画弧：

var dom = document.getElementById(‘canvas‘);
var ctx = dom.getContext(‘2d‘);
ctx.arc(0, 0, r-5, 0, 2*Math.PI, false);

其中：ctx.arc(position-x,position-y,radius,begin arc,end arc,clockwise);

注意，开始角度为pi/2;如下图所示；

技术分享

ctx.stroke();//描边

ctx.fill();//填充

画一个梯形：

var r = 200;
ctx.moveTo(-2 ,20);
ctx.lineTo( 2, 20);
ctx.lineTo( 1, -r + 18);
ctx.lineTo( -1, -r + 18);
ctx.fillStyle = ‘#c14543‘;
ctx.fill();

常用属性：

ctx.store();

ctx.restore();

成对使用，保存当前左边原点的位置，完成绘制后再返回原来的位置；

原文：http://www.cnblogs.com/hooo/p/6441893.html

踩

(0)

评论一句话评论（0）

分享档案

更多>