h5 canvas学习笔记

时间 2020-06-03 标签 h5 canvas 学习笔记

建立画布：

<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前端开发技术》里面一个模拟时钟的代码javascript

<!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 οnlοad="init();">
    <canvas id="canvas" width="150px" height="150px">
        你的浏览器不支持Canvas
    </canvas>
</body>
</html>

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