h5 canvas学习笔记

来源：互联网发布：淘宝店铺分数怎么会编辑：程序博客网时间：2024/05/16 07:37

创建画布：

    <canvas id="myCanvas" width="600px" height="530px">        你的浏览器不支持canvas    </canvas>

以上代码为在html文件里面添加一个canvas标签（若浏览器不支持此属性则会显示“你的浏览器不支持canvas”），除了width和height属性外，其还支持h5的标准属性，但是，canvas不是块级元素，在设置其居中的时候，要么外层包一个div，要么设置body的text-align为center。

获取画笔：

    var canvas = document.getElementById('myCanvas');    var ctx = canvas.getContext('2d');

其中canvas是画布元素，ctx可以简单的理解为画笔。canvas本身是一块画布，没有画图能力，需要使用js来画图。

画图步骤：

保存当前的画图状态（save()函数）
设置画笔属性
勾勒或者填充
切换回保存的画图状态（restore()）

其中，第一步和第四步是需要配对使用的，它的意思是在画一个新的组件之前，将此时的画笔设置状态保存，在组件画完之后，恢复画笔状态，去除重复设置的

繁琐以及减少代码量和冗余。

样式设置：

ctx.fillStyle // 填充的颜色样式，值为十六进制表示或者其他的颜色表达式ctx.strokeStyle // 勾勒的颜色样式，值同上ctx.globalAlpha // 透明度样式，值为数字ctx.lineWidth // 线条的宽度，单位是像素ctx.lneCap // 线条的端点样式，值为butt/round/square，分别对应无端点、圆形端点、正方形端点ctx.lineJoin // 两条直线的交汇处的拐角形状，值为miter/round/bevel，分别对应端点的尖角、圆角、斜角。

接口：

    // 绘制矩形、实心矩形    ctx.strokeRect(x0, y0, width, height);    ctx.fillRect(x0, y0, width, height);    // 开始勾勒路径和结束勾勒路径    ctx.beginPath();    ctx.closePath();    // 根据路径画图或者填充整个路径围起来的区域    ctx.fill();    ctx.stroke();    // 绘制直线    ctx.moveTo(startX, startY);    ctx.lineTo(endX, endY);    // 勾勒圆形路径    // 参数：圆心坐标，半径，开始角度，结束角度，顺时针    // 切记：顺时针为正角，与数学逆时针为正角有所不同    ctx.arc(x0, y0, radius, startAngel, endAngel, Counterclockwise);    // 绘制曲线    // 参数：开始端点坐标，结束端点坐标    ctx.arcTo(x1, y1, x2, y2, radius);    // 颜色渐变    // 参数：两个变化端点的坐标    var obj = ctx.createLinearGradient(x1, y1, x2, y2);    // 为渐变设置渐变色    // 参数：距离起点的偏移量（范围0-1），颜色值    obj.addColorStop(offset, color);    // 平移    // 参数：相对于原坐标的平移大小    ctx.translate(x, y);    // 缩放    // 参数：相对于原坐标的缩放比    ctx.scale(x, y);    // 旋转    // 旋转的角度，单位为°    // 是以坐标原点为中心的旋转，如果需要以某点为中心旋转    // 可使用translate()将坐标原点平移到该点位置，旋转后在平移回来    ctx.rotate(x);

canvas的函数接口远远不止这些戳这里了解更多

实例：

此实例为极客学院出品的《HTML5+CSS3web前端开发技术》里面一个模拟时钟的代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>clock</title>    <script type="text/javascript">        function init(argument) {            clock();            setInterval(clock, 1000);        }        function clock() {            var now = new Date();            var sec = now.getSeconds();            var min = now.getMinutes();            var hr = now.getHours();            hr = hr >= 12 ? hr - 12 : hr;            var ctx = document.getElementById('canvas').getContext('2d');            ctx.save();            ctx.clearRect(0, 0, 150, 150);            ctx.translate(75, 75);            ctx.scale(0.4, 0.4);            ctx.rotate(-Math.PI / 2);            ctx.strokeStyle = "black";            ctx.fillStyle = "white";            ctx.lineCap = "round";            ctx.beginPath();            ctx.lineWidth = 10;            ctx.strokeStyle = '#325FA2';            ctx.arc(0, 0, 142, 0, Math.PI * 2, true);            ctx.stroke();            ctx.save();            for (var i = 0; i < 12; i++) {                ctx.beginPath();                ctx.rotate(Math.PI / 6);                ctx.moveTo(100, 0);                ctx.lineTo(120, 0);                ctx.stroke();            }            ctx.restore();            ctx.save();            ctx.lineWidth = 5;            for (var i = 0; i < 60; i++) {                if (i % 5 != 0) {                    ctx.beginPath();                    ctx.moveTo(117, 0);                    ctx.lineTo(120, 0);                    ctx.stroke();                }                ctx.rotate(Math.PI / 30);            }            ctx.restore();            ctx.fillStyle = "black";            ctx.save();            ctx.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) * sec);            ctx.lineWidth = 14;            ctx.beginPath();            ctx.moveTo(-20, 0);            ctx.lineTo(80, 0);            ctx.stroke();            ctx.restore();            ctx.save();            ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec);            ctx.lineWidth = 10;            ctx.beginPath();            ctx.moveTo(-28, 0);            ctx.lineTo(112, 0);            ctx.stroke();            ctx.restore();            ctx.save();            ctx.rotate((Math.PI / 30) * sec);            ctx.strokeStyle = "#D40000";            ctx.fillStyle = "D40000";            ctx.lineWidth = 6;            ctx.beginPath();            ctx.moveTo(-30, 0);            ctx.lineTo(83, 0);            ctx.stroke();            ctx.beginPath();            ctx.arc(0, 0, 10, 0, Math.PI * 2, true);            ctx.fill();            ctx.beginPath();            ctx.arc(95, 0, 10, 0, Math.PI * 2, true);            ctx.stroke();            ctx.fillStyle = "rgba(0, 0, 0, 0)";            ctx.arc(0, 0, 3, 0, Math.PI * 2, true);            ctx.fill();            ctx.restore();            ctx.restore();        }    </script>    <style type="text/css">        canvas {            border: 1px solid black;        }    </style></head><body onload="init();">    <canvas id="canvas" width="150px" height="150px">        你的浏览器不支持Canvas    </canvas></body></html>

此外，我自己也动手做了一个canvas的小游戏，初期版本很粗糙，移动端某些浏览器可能无法兼容，有时间再去完善，有兴趣的朋友可以戳这里玩玩。

0 0