从本篇文章开始,我会分享给大家canvas绘制的各种基础图形和酷炫的图形,注意:是一系列!欢迎关注!
后续每篇文章我会着重分享给大家一些使用Canvas开发的实例和这些实例的实现思路。
本文看点:使用canvas来绘制常见的各种图形实例,并且会简单封装一下绘制各图形的方法,最后会分享给大家一个封装好的快速绘制多边形的方法。

开始之前

//获取canvas容器var can = document.getElementById('canvas');//创建一个画布var ctx = can.getContext('2d');

绘制圆形

var draw = function(x, y, r, start, end, color, type) {
    var unit = Math.PI / 180;
    ctx.beginPath();
    ctx.arc(x, y, r, start * unit, end * unit);
    ctx[type + 'Style'] = color;
    ctx.closePath();
    ctx[type]();}

参数解释:x,y-圆心;start-起始角度;end-结束角度;color-绘制颜色;type-绘制类型('fill'和'stroke')。

实例如下图所示:

延伸阅读

学习是年轻人改变自己的最好方式-Java培训,做最负责任的教育,学习改变命运,软件学习,再就业,大学生如何就业,帮大学生找到好工作,lphotoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训学习是年轻人改变自己的最好方式