本篇文章为大家展示了html5 canvas绘图的基本使用方法，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

超过10余年行业经验，技术领先，服务至上的经营模式，全靠网络和口碑获得客户，为自己降低成本，也就是为客户降低成本。到目前业务范围包括了：成都网站设计、成都网站制作，成都网站推广，成都网站优化，整体网络托管，微信小程序开发，微信开发，app软件定制开发，同时也可以让客户的网站和网络营销和我们一样获得订单和生意！

绘制线段moveTo()和lineTo()

以下是一个简单的绘图示例：

    
    
    
    
        你的浏览器还不支持canvas
    

绘制五角星

var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    context.beginPath();
    //设置是个顶点的坐标，根据顶点制定路径
    for (var i = 0; i < 5; i++) {
        context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200,
                        -Math.sin((18+i*72)/180*Math.PI)*200+200);
        context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+200,
                        -Math.sin((54+i*72)/180*Math.PI)*80+200);
    }
    context.closePath();
    //设置边框样式以及填充颜色
    context.lineWidth="3";
    context.fillStyle = "#F6F152";
    context.strokeStyle = "#F5270B";
    context.fill();
    context.stroke();

上述内容就是html5 canvas绘图的基本使用方法，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联-成都网站建设公司行业资讯频道。

文章标题：html5canvas绘图的基本使用方法-创新互联
URL分享：http://chengdu.cdxwcx.cn/article/djjcod.html