canvas绚丽的时钟效果（上）

最新推荐文章于 2021-10-04 19:11:40 发布

MayMayJn

最新推荐文章于 2021-10-04 19:11:40 发布

阅读量682

点赞数

分类专栏： web前端文章标签： html5 canvas 前端

本文链接：https://blog.csdn.net/MayMayJn/article/details/53506856

版权

web前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

canvas是HTML5的特性，是定义在浏览器上的画布。前端好多精美的网页都会用到canvas这一特性。
慕课网上有很多canvas的教程，我学了一个比较基础但是效果非常引人入胜的教程，就是用canvas动画实现倒计时效果。

用canvas进行基础的绘画：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
    <canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;"></canvas>

    <script type="text/javascript">
        window.onload = function() {
        //context指定绘图的上下文环境
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext("2d");

            //指定canvas的大小,也可以在canvas标签内指定width="1024" height="768"
            //canvas默认画布大小是300*150
            canvas.width = 1024;
            canvas.height = 768;
            //moveTo绘制的起点
            context.beginPath();
            context.moveTo(100,100);
            context.lineTo(700,700);
            context.lineTo(100,700);
            context.lineTo(100,100);
            context.closePath();
            // 线条的粗细
            context.lineWidth = 5;
            // 线条的颜色
            context.strokeStyle = "red";
            // 画一条直线
            context.stroke();
            //填充的颜色，绘制实心的图形
            context.fillStyle = "rgb(2,100,30)";
            context.fill(); 

            context.beginPath();
            context.moveTo(200,100);
            context.lineTo(800,700);
            context.closePath();
            context.strokeStyle = "black";
            context.stroke();
        }
    </script>
</body>
</html>

canvas基础绘图

上面图片的是用canvas画最基础的直线和块的效果。

context.stroke()绘制一条直线
context.fill()绘制一个填充的图形

context.beginPath();是一段绘图的开始
context.closePath();是一段绘图的结束
比如上面的图片我画了一条直线和一个三角形，每画一个独立的图形时都要有一个context.beginPath()和context.closePath();

只要会画直线和简单的填充，我们就可以绘制一个七巧板了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>七巧板</title>
</head>
<body>
    <canvas id="canvas" style="display: block;margin: 50px auto;">
        当前浏览器不支持canvas，请更换浏览器后再试
    </canvas>

    <script type="text/javascript">
        var tangram = [
            {p:[{x:0,y:0},{x:400,y:0},{x:200,y:200}],color:"#caff67"},
            {p:[{x:0,y:0},{x:200,y:200},{x:0,y:400}],color:"#67bccf"},
            {p:[{x:400,y:0},{x:400,y:200},{x:300,y:300},{x:300,y:100}],color:"#ef3d61"},
            {p:[{x:300,y:100},{x:300,y:300},{x:200,y:200}],color:"#f9f51a"},
            {p:[{x:200,y:200},{x:300,y:300},{x:200,y:400},{x:100,y:300}],color:"#a504c0"},
            {p:[{x:100,y:300},{x:200,y:400},{x:0,y:400}],color:"#fa8ece"},
            {p:[{x:400,y:200},{x:400,y:400},{x:200,y:400}],color:"#f6ca29"},
        ];
        window.onload = function() {
            var canvas = document.getElementById('canvas');

            canvas.width = 400;
            canvas.height= 400;

            var context = canvas.getContext("2d");
            for (var i = 0; i < tangram.length; i++) {
                draw(tangram[i],context);
            }
        }
        function draw(piece,cxt) {
            cxt.beginPath();
            cxt.moveTo(piece.p[0].x,piece.p[0].y);
            for (var i = 0; i < piece.p.length; i++) {
                cxt.lineTo(piece.p[i].x,piece.p[i].y);
            }
            cxt.closePath();

            cxt.fillStyle = piece.color;
            cxt.fill();

            cxt.strokeStyle = "black";
            cxt.lineWidth = 3;
            cxt.stroke();
        }
    </script>
</body>
</html>

效果如图：
七巧板

画完这个是不是觉得canvas还挺好玩的，而且只是用直线和简单的图形组成的。
接下来就是用canvas画圆圆。。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>circle_more</title>
</head>
<body>
    <canvas id="canvas" style="border: 1px solid #ccc; display: block;margin: 50px auto;">
        当前浏览器不支持canvas，请更换浏览器后再试
    </canvas>

    <script type="text/javascript">
        window.onload = function() {
            var canvas = document.getElementById('canvas');

            canvas.width = 400;
            canvas.height= 400;

            var context = canvas.getContext("2d");

            context.lineWidth = 5;
            context.strokeStyle = "#005588";
            //参数分别是圆心坐标x,y,园的半径，起始弧度，结束弧度，绘制方向（默认false顺时针）
            context.arc(200,200,100,0,1.5*Math.PI);
            context.stroke();
        }
    </script>
</body>
</html>

效果如图：
canvas画圆

这是一个顺时针的圆弧，context.arc()函数的参数依次是圆心坐标x,y,园的半径，起始弧度，结束弧度，绘制方向（默认false顺时针，省略不写就是false）

我们还可以画很多弧度不一样的圆弧，只要用一个for循环就可以了：

for (var i = 0; i < 10; i++) {
                context.beginPath();
                context.arc(20+i*40,40,10,0,2*Math.PI*(i+1)/10,true);
                context.closePath();

                context.stroke();
            }