Html5 的Canvas使用

来源：互联网发布：西瓜播放器mac版编辑：程序博客网时间：2024/05/16 06:16

随着安卓的迅猛发展，native app的发展让我们程序员有点蛋疼，随着现在什么微信，淘宝等好像里面的web app的成分也是越来越重，让我们原生app开发者不得不警惕起来，有什么办法呢，还得自己去学咯，个人还是不敢苟同web app将会替代native app，但是html5的功能确实是非常的强大，然后里面的新标签比如canvase,svg都让我们不得不也联想安卓api里面也是canvas用的方法差不多，然后5.x后也是推出了svg，看来安卓的native app的开发与html5的距离又拉近了，也不会在为某个动画和贝塞尔曲线搞的蛋疼，那就有必要去学习html5咯。

学习开发一个新的东西总是苦难的，那么我们就从基础来开始把。

<canvas></canvas>是html5出现的新标签，像所有的dom对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js能够调用它来进行绘图。

还记的javaee的时候也是有document.getElementById(）或byName(),同样也是还是支持w3c的规范，还是javaScript和css，所以我们就不应该去畏惧。那么我们就先来看下canvas的基础吧，其实里面的东西还真不多，也就是画线和画图片，和安卓自定义view里面的onDraw()一样的去写东西就好了。

基础学习：

（1）context:一直觉得这个翻译成“上下文”真够蛋疼的，context是一个封装了很多绘图功能的对象，获取这个对象的方法是

var context =canvas.getContext("2d");//var 就是一个弱类型而已，再也没有java里面的什么基本数据类型什么的了

（2）画的方式

canvas元素绘制图像的时候有两种方法，分别是：context.fill()//填充 context.stroke()//绘制边框

是不是和安卓里面的很像，安卓里面有fill、stroke、fillAndStroke,fill就是内容填充，stroke就是边框

（3） style:在进行图形绘制前，要设置好绘图的样式： context.fillStyle//填充的样式 context.strokeStyle//边框样式

（4）context.lineWidth//图形边框宽度，安卓里面呢是strokeWidth，反正都差不多吧

（5）颜色的表示方式:

直接用颜色名称:"red" "green" "blue"

十六进制颜色值: "#EEEEFF"

rgb(1-255,1-255,1-255)

rgba(1-255,1-255,1-255,透明度)

然后属性介绍完了，然后我们来绘制图形了

绘制矩形

context.fillRect(x,y,width,height) //实心矩形

strokeRect(x,y,width,height)//空心矩形

清除矩形区域（这个注意下）

context.clearRect(x,y,width,height)

圆弧

context.arc(x, y, radius, starAngle,endAngle, anticlockwise)

经过试验证明书本上ture是顺时针，false是逆时针是错误的，而且无论是逆时针还是顺时针，角度都沿着顺时针扩大，如下图：

然后我们还有画线的方法

context.moveTo(x,y) //是不是和安卓path的方法一样（moveTo，lineTo）

context.lineTo(x,y)

每次画线都从moveTo的点到lineTo的点， 如果没有moveTo那么第一次lineTo的效果和moveTo一样，每次lineTo后如果没有moveTo，那么下次lineTo的开始点为前一次lineTo的结束点。

路径（重点）

context.beginPath()

context.closePath()

得出的结论有：*号为重点

1、系统默认在绘制第一个路径的开始点为beginPath

*2、如果画完前面的路径没有重新指定beginPath，那么画第其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制

3、每次调用context.fill（）的时候会自动把当次绘制的路径的开始点和结束点相连，接着填充封闭的部分

如果没有closePath那么前面的路劲会保留，实验证明正确的结论是如果没有重新beginPath那么前面的路劲会保留，记住每次画路径都在前后加context.beginPath() 和context.closePath()就行

最后我们来个小例子练练手。

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body>    <canvas id="canvas" style="border: 1px solid #ff0000;display: block;align-content: center" width="368" height="624"></canvas>    <script>        window.onload =function(){            var canvas=document.getElementById("canvas");            canvas.height=624;            canvas.width=368;            if(canvas.getContext("2d")){                var context=canvas.getContext("2d");                draw(context);            }else{                alert("当前浏览器不支持Canvas,请更换浏览器后再试");            }        }        function draw(cxt){            cxt.save();            head(cxt);            backbone(cxt);            fishtail(cxt);            cxt.restore();        }        // 头        function head(context){            context.beginPath();            context.moveTo(100, 100);            context.quadraticCurveTo(200, -50, 300, 100);            context.moveTo(100, 100);            context.lineTo(300, 100);            context.stroke();            context.beginPath();            context.arc(200, 60, 10, 0, Math.PI * 2, false);            context.stroke();            context.beginPath();            context.fillStyle = 'wilte';            context.arc(200, 60, 5, 0, Math.PI * 2, false);            context.fill();        }        //骨干        function backbone(context){            context.moveTo(190, 100);            //fillRect(x, y, width, height)x, y 矩形的左上角的坐标width, height  矩形的大小            context.strokeRect(190, 100, 20, 35);            context.closePath();            context.stroke();            for(var y = 150; y <= 450; y+=50){                twoBackbone(context, y);            }        }        function twoBackbone(context, y){            context.beginPath();            context.arc(200, y, 15, 0, Math.PI * 2, false); //圆形            context.closePath();            context.stroke();            //左排骨            context.beginPath();            context.moveTo(185,y);            context.quadraticCurveTo(75, y + 25, 165, y + 40);            context.lineWidth  = 4;            context.stroke();            //右排骨            context.beginPath();            context.moveTo(215,y);            context.quadraticCurveTo(320, y + 25, 235, y + 40);            context.stroke();            context.beginPath();            context.lineWidth = 1;            var height = 20;            if(y == 450){                height = 35;            }            context.strokeRect(190, y + 15, 20, height);//矩形            context.closePath();            context.stroke();        }        //鱼尾        function fishtail(context){            context.beginPath();            context.moveTo(190, 500);            context.lineTo(110, 560);            context.moveTo(210, 500);            context.lineTo(290, 560);            context.moveTo(110, 560);            context.lineTo(200, 540);            context.lineTo(290, 560);            context.moveTo(200, 500);            context.lineTo(200, 540);            twoFishtail(context);            context.stroke();        }        function twoFishtail(context){            var j = 10;            //右侧            for(var i = 0; i <= 50; i += 10,j += 10){                context.moveTo(200 + j, 500 + i);                context.lineTo(200 + j, 540);            }            j = 0;            //左侧            for(var i = 0; i <= 50; i += 10,j -= 10){                context.moveTo(190 + j, 500 + i);                context.lineTo(190 + j, 540);            }        }        window.addEventListener("load", draw, true);    </script></body></html>

效果图：

媽蛋，睡觉。。。。。。。。。

3 0