关于canvas

来源：互联网发布：淘宝关键词哪里设置编辑：程序博客网时间：2024/06/03 22:40

    canvas是h5的标签，该标签定义图形，比如图表和其他图像。该标签是行级元素。<canvas>标签只是图形容器，必须使用脚本来绘制图形。canvas标签是h5新增的标签，对于很多浏览器都具有兼容性，虽然具有兼容性，但通过canvas标签可以制作许多图形和好看的图表、图像以及一些动画效果，甚至可以只使用canvas标签来制作一款小游戏。在说canvas之前先说一说面向对象中的自定义事件。    我们都知道，无论是面向对象还是其他，DOM元素都具有一些事件，比如：onclick、onmousedown...等。这些都是系统自带的，若开发人员想要自己定义事件和自定义事件绑定该如何实现？那么，这次自定义事件或许对你会有一些帮助。那么，我们就用一些例子来和大家说一说自定义事件。    例:

<body>    <div id="div"></div>    <script>        var div=document.getElementsByTagName("div")[0];        function addEvent(element,type,fn){            element.obj=element.obj||{};            element.obj[type]=element.obj[type]||[];            element.obj[type].push(fn);        }        function firEvent(element,type){            var arr=element.obj[type];            for(var i=0;i<arr.length;i++){                arr[i]();            }        }        addEvent(div,"abc",function(){...});        fireEvent(div,"abc");    </script>    //JQuery    $("#div").on("hello",function(){...});    $("#div").trigger("hello");//绑定自定义事件</body>

    书归正传，接下来和大家来唠一唠canvas。我们依然还是以一个例子来解析一下canvas.    例:

<body><canvas id="canvas"></canvas><script>        var canvas = document.getElementById('canvas');        canvas.width = 500;        canvas.height = 500;        canvas.style.background = "hotpink";        var ctx = canvas.getContext("2d");        ctx.beginPath();        ctx.moveTo(100,100);        ctx.lineTo(400,400);        ctx.closePath();        ctx.strokeStyle = "yellow";        ctx.lineWidth = "10";        ctx.stroke();        ctx.fillStyle="blue"        ctx.fill();</script></body>

    以上面例子来解析一下canvas中各个语法和属性的含义。    在canvas坐标系中，从最左上角的0，0开始，x向右增大,y向下增大    （1）wideth：设置canvas的宽。canvas的默认宽为300px。设置canvas的宽高只能通过canvas.width的方式来进行对canvas宽高的设置和修改。    （2）height:设置canvas的高。canvas的默认高为150px。    （3）getContext("2d"):得到canvas的上下文场景(获得画布的控制权),2d表示为平面效果。若想要3d效果，则将2d设置成webgl.只有获得画布的控制权才可以在canvas画布上绘制。    （3）moveTo(x,y):设置绘制路径的起点，相当于移动画笔到某个位置    （4）lineTo(x,y):从上一点绘制一条直线到x，y这个坐标点    （5）stroke():描边，根据路径绘制线，路径只是草稿，真正绘制线必须执行stroke    （6）fill():填充，是将闭合的路径的内容填充具体的颜色    （7）lineWidth:绘制线的宽度    （8）beginPath():开始路径    （9）closePath():闭合路径    （10）strokeStyle:描边的样式    （11）fillStyle:填充的样式    下面通过几个案例来和大家看一下通过canvas绘制图形。

例1：绘制表格

<canvas></canvas><script>    var canvas=document.getElementsByTagName("canvas")[0];    var ctx=canvas.getContext("2d");    canvas.width=500;    canvas.height=500;    for(var i=0;i<=500;i+=25){        ctx.moveTo(i,0);        ctx.lineTo(i,500);        ctx.moveTo(0,i);        ctx.lineTo(500,i);    }    ctx.stroke();</script>

    效果图:    ![这里写图片描述](http://img.blog.csdn.net/20171027195534125?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGF2ZW5kZXJzdWU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)    例2:    矩形1:

<canvas></canvas><script type="text/javascript">            var canvas=document.getElementsByTagName("canvas")[0];            var ctx=canvas.getContext("2d");            canvas.width=500;            canvas.height=500;            ctx.rect(100,200,300,400);//rect(x,y,width,height),可以直接绘制矩形            ctx.strokeStyle="black";            ctx.stroke();            ctx.fillStyle="aquamarine";            ctx.fill();</script>

    矩形2

        <canvas></canvas>    <script type="text/javascript">        var canvas=document.getElementsByTagName("canvas")[0];        var ctx=canvas.getContext("2d");        canvas.width=500;        canvas.height=500;        ctx.strokeStyle="black";        ctx.strokeRect(100,200,300,400);//绘制矩形路径的同时也描边        ctx.fillStyle="aquamarine";        ctx.fillRect(100,200,300,400);//绘制矩形路径的同时填充    </script>

效果图:![这里写图片描述](http://img.blog.csdn.net/20171027195753522?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGF2ZW5kZXJzdWU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)    例3:圆弧

<canvas></canvas><script type="text/javascript">        var canvas=document.getElementsByTagName("canvas")[0];        var ctx=canvas.getContext("2d");        canvas.width=400;        canvas.height=400;        ctx.beginPath();        ctx.arc(200,200,200,0,Math.PI/2,false);//arc(x,y,r:半径,sAngle:开始的角度,eAngle:结束角度，counterclockwise:是否是逆时针，true是逆时针,false是顺时针，默认为false),绘制圆弧        ctx.stroke();</script>

    效果图:    ![这里写图片描述](http://img.blog.csdn.net/20171027201146032?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGF2ZW5kZXJzdWU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)    例4:饼图

<canvas></canvas><script type="text/javascript">        var data=[        {            value:0.1,            color:"#9370db"        },        {            value:0.3,            color:"#6495ed"        },        {            value:0.2,            color:"#ffe4b5"        },        {            value:0.3,            color:"#f08080"        },        {            value:0.1,            color:"#556b2f"        }        ];        var canvas=document.getElementsByTagName("canvas")[0];        var ctx=canvas.getContext("2d");        canvas.width=500;        canvas.height=500;         var start=0;         var end=0;         for(var i=0;i<data.length;i++){            end=start+Math.PI*2*data[i].value;            ctx.beginPath();            ctx.moveTo(250,250);            ctx.arc(250,250,200,start,end);            ctx.fillStyle=data[i].color;            ctx.fill();            start=end;         }</script>

    效果图:    ![这里写图片描述](http://img.blog.csdn.net/20171027200052870?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGF2ZW5kZXJzdWU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)    通过canvas还可以绘制很多图形，大家可以自己回去试一试。

阅读全文

0 0