canvas 笔记

转载已于 2022-10-19 09:37:18 修改 · 200 阅读

CC 4.0 BY-SA版权

原文链接：https://blog.csdn.net/weixin_44966759/article/details/108655037?ops_request_misc=&request_id=&biz_id=102&utm_term=canvas&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~sobaiduweb~default-5-108655037.nonecase&spm=1018.2226.3001.4450

文章标签：

#javascript #前端 #html

于 2022-10-17 21:29:55 首次发布

本文介绍了HTML5 canvas元素的原理与应用，包括基础概念、笑脸绘制实例，以及利用canvas实现行星运行的动画效果，带你领略前端绘图的强大功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是canvas?

html5的canvas 元素，使用javascript在网页上绘制图像；

画布是一个巨型区域，可以控制其每一个像素；

canvas是拥有多种绘制路径、矩形、圆形以及添加图像的方法。

canvas只有width 和height 两属性，且在低版本的浏览器不支持

<canvas id="smile" width="150" height="150">浏览器版本不支持</canvas>

用canvas画一个笑脸：

<canvas id="smile"></canvas>

    <script>

        function draw(){
            var canvas = document.getElementById("smile")
            if(canvas.getContext){
                var ctx = canvas.getContext('2d');
                ctx.beginPath();
                 ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 圆心的横、纵坐标，半径，圆弧开始角度，结束角度，是否逆时针

                ctx.moveTo(110,75)
                ctx.arc(75,75,35,0,Math.PI,false)

                ctx.moveTo(65,65)
                ctx.arc(60,65,5,0,Math.PI*2, true)

                ctx.moveTo(95,65)
                ctx.arc(90,65,5,0,Math.PI*2, true)

                ctx.stroke();

            }
        }

        draw()

    </script>

参考：前端装逼必备--Canvas

用canvas 绘制行星运行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <canvas id="star" width="1000" height="1000" style="background:#000;">浏览器版本不支持</canvas>

    <script>

        const ctx = document.getElementById('star').getContext('2d');

        function drawTrack(){
           
            for(var i=0;i<8;i++){
                ctx.beginPath();
                ctx.arc(500,500,50*(i+1),0,360,false)
                ctx.closePath()
                ctx.strokeStyle ="#fff"
                ctx.stroke()
            }

        }

        function drawStar(x,y,radius,startColor,endColor,cycle){
            this.x = x
            this.y = y
            this.radius = radius
            this.startColor = startColor
            this.endColor = endColor
            this.cycle = cycle
            // 渐变颜色空对象
            this.color = null

            this.time = 0 // 设置一个定时器

            this.draw = function(){
                ctx.save();
                ctx.translate(500,500);
                ctx.rotate(this.time*(360/this.cycle)*Math.PI/180)
                ctx.beginPath()
                ctx.arc(this.x,this.y,this.radius,0,360,false)
                ctx.closePath();

                this.color = ctx.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius) // 径向渐变
                this.color.addColorStop(0,this.startColor);
                this.color.addColorStop(1,this.endColor);
                ctx.fillStyle = this.color
                ctx.fill();
                ctx.restore();

                this.time += 1;
            }
        }

        // 创建一个太阳的对象
        function Sun(){
            // 第一个参数是this,从第二个参数起才是drawTrack()的参数 
            drawStar.call(this,0,0,20,'#f60','#f90',0)
        }

        // 水星
        function Mercury(){
            drawStar.call(this,0,-50,10,"#a69697", "#5c3e40",87.7)
        }
        // 金星 
        function Venus(){
            drawStar.call(this,0,-100,10, "#c4bbac", "#1f1315",224.701)
        }
        // 地球 
        function Earth(){
            drawStar.call(this,0,-150,10,"#78B1E8", "#050C12",365.2422)
        }
        // 火星
        function Mars(){
            drawStar.call(this,0,-200,10,"#CEC9B6", "#76422D", 686.98)
        }
        // 木星
        function Jupiter(){
            drawStar.call(this,0,-250, 10, "#C0A48E", "#322222", 4332.589)
        }
        // 土星
        function Saturn(){
            drawStar.call(this,0, -300, 10, "#F7F9E3", "#5C4533", 10759.5)
        }
        // 天王星
        function Uranus(){
            drawStar.call(this,0, -350, 10, "#A7E1E5", "#19243A", 30799.095)
        }
        // 海王王星
        function Neptune(){
            drawStar.call(this,0,  -400, 10, "#0661B2", "#1E3B73", 164.8 * 365)
        }
        
        var sun = new Sun()
        var mercury = new Mercury()
        var earth = new Earth()
        var mars = new Mars()
        var jupiter = new Jupiter()
        var saturn = new Saturn()
        var uranus = new Uranus()
        var neptune = new Neptune()

        function drawAll() {
            ctx.clearRect(0,0,1000,1000) // 不断清楚画面效果再绘制，形成动画效果

            drawTrack()
            sun.draw()
            mercury.draw()
            earth.draw()
            mars.draw()
            jupiter.draw()
            saturn.draw()
            uranus.draw()
            neptune.draw()
        }

        //  drawAll()
         setInterval(drawAll,10)

    </script>
</body>
</html>

参考：什么是Canvas