html5canvas绘图的基本使用方法

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

创新互联公司坚持“要么做到,要么别承诺”的工作理念,服务领域包括:做网站、网站设计、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的荣成网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

绘制线段moveTo()和lineTo()

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

   

    canvas绘图演示

   

   

        你的浏览器还不支持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绘图的基本使用方法
本文网址:http://pwwzsj.com/article/jcpgip.html