Canvas学习

已于 2022-08-01 02:43:10 修改
阅读量461 收藏 3
点赞数
分类专栏： 前端 文章标签： 学习 前端
于 2022-08-01 02:38:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoyao_zhy/article/details/126093335
版权

1.Canvas画直线

1.1 步骤

1.获取画布

2.获取画布的上下文

3.开始一条路径

4.确定起始点

5.确定结束点

6.着色

7.结束路径

1.2 代码

<!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>
    <style>
        canvas{
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>
<body>
<!--canvas在低版本浏览器中不兼容，需要提示用户--->
<!--如果让canvas左右居中，使用display设置为block-->
    <canvas width="500" height="500" id="canvas">您的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
<script>
    //获取canvas标签
    var canvas =document.getElementById("canvas");
    //获取上下文对象
    var c=canvas.getContext('2d')
    //开启一条路径
    c.beginPath();
    //确定起始点
    c.moveTo(100,100)
    //到哪去，确定结束点
    c.lineTo(300,300)
    /*
    在着色之前设置颜色和线宽
    */
    //设置颜色
    c.strokeStyle ='green';
    //设置线宽
    c.lineWidth = 3;
    //进行上色
    c.stroke()
    //关闭路径
    c.closePath()
</script>
</body>
</html>

getContext("2d")对象是内建HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。这里只有”2d“这个属性，没有”3d“！！！

2. 直线连用和画虚线

2.1 代码

<!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>
    <style>
        canvas{
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>
<body>
<!--canvas在低版本浏览器中不兼容，需要提示用户--->
<!--如果让canvas左右居中，使用display设置为block-->
    <canvas width="500" height="500" id="canvas">您的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
<script>
    var canvas =document.getElementById("canvas");
    var c=canvas.getContext('2d')
​
    c.beginPath();
    c.moveTo(100,100)
    c.lineTo(400,100)
    c.strokeStyle ='green';
    c.lineWidth = 3;
    c.stroke()
    c.closePath()
​
    c.beginPath();
    c.moveTo(400,100)
    c.lineTo(400,400)
    c.strokeStyle ='yellow';
    c.lineWidth = 3;
    c.stroke()
    c.closePath()
​
    c.beginPath();
    c.moveTo(400,400)
    c.lineTo(100,400)
    c.strokeStyle ='red';
    c.lineWidth = 3;
    c.stroke()
    c.closePath()
​
    c.beginPath();
    c.moveTo(100,400)
    c.lineTo(100,100)
    c.strokeStyle ='blue';
    c.lineWidth = 3;
    c.stroke()
    c.closePath()
</script>
</body>
</html>

2.2 直线封装

<!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>
    <style>
        canvas{
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>
<body>
<!--canvas在低版本浏览器中不兼容，需要提示用户--->
<!--如果让canvas左右居中，使用display设置为block-->
    <canvas width="500" height="500" id="canvas">您的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
<script>
    var canvas =document.getElementById("canvas");
    var c=canvas.getContext('2d')
​
    drawLine(100,100,400,100,'green',4)
    drawLine(400,100,400,400,'yellow',4)
    drawLine(400,400,100,400,'red',4)
    drawLine(100,400,100,100,'blue',4)
    /*
        画直线
    */
    function drawLine(x1,y1,x2,y2,color,lineWidth){
        c.beginPath();
        c.moveTo(x1,y1)
        c.lineTo(x2,y2)
        c.strokeStyle =color;
        c.lineWidth = lineWidth;
        c.stroke()
        c.closePath() 
    }
</script>
</body>
</html>

2.3 直线连用

<!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>
    <style>
        canvas{
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>
<body>
<!--canvas在低版本浏览器中不兼容，需要提示用户--->
<!--如果让canvas左右居中，使用display设置为block-->
    <canvas width="500" height="500" id="canvas">您的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
<script>
    var canvas =document.getElementById("canvas");
    var c=canvas.getContext('2d')
    /*直线可多次使用*/
    c.beginPath();
    c.moveTo(100,100)
    c.lineTo(400,100)
    c.lineTo(400,400)
    c.lineTo(100,400)
    c.lineTo(100,100)
    c.strokeStyle ='blue';
    c.lineWidth = 2;
    c.stroke()
    c.closePath() 
​
</script>
</body>
</html>

<!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>
    <style>
        canvas{
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>
<body>
<!--canvas在低版本浏览器中不兼容，需要提示用户--->
<!--如果让canvas左右居中，使用display设置为block-->
    <canvas width="500" height="500" id="canvas">您的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
<script>
    var canvas =document.getElementById("canvas");
    var c=canvas.getContext('2d')
    /*直线可多次使用*/
    c.beginPath();
    c.moveTo(100,100)
    c.lineTo(400,100)
    c.lineTo(400,400)
    // c.lineTo(100,400)
    c.lineTo(100,100)
    c.strokeStyle ='blue';
    c.lineWidth = 2;
    c.stroke()
    c.closePath() 
</script>
</body>
</html>

2.4 画虚线

<!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>
    <style>
        canvas{
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>
<body>
<!--canvas在低版本浏览器中不兼容，需要提示用户--->
<!--如果让canvas左右居中，使用display设置为block-->
    <canvas width="500" height="500" id="canvas">您的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
<script>
    var canvas =document.getElementById("canvas");
    var c=canvas.getContext('2d')
    
    //画虚线
    for(let i=0;i<30;i++)
    {
        drawLine(100+10*i,100,105+10*i,100,'red',2)
        drawLine(100+10*i,100+10*i,105+10*i,100+10*i,'green',2)
        drawLine(100+10*i,100+5*i,105+10*i,100+5*i,'green',2)
    }
​
    function drawLine(x1,y1,x2,y2,color,lineWidth){
        c.beginPath();
        c.moveTo(x1,y1)
        c.lineTo(x2,y2)
        c.strokeStyle =color;
        c.lineWidth = lineWidth;
        c.stroke()
        c.closePath() 
    }
</script>
</body>
</html>

3. 随机统计图和圆和圆弧

3.1 随机统计图

<!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>
    <style>
        canvas{
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>
<body>
<!--canvas在低版本浏览器中不兼容，需要提示用户--->
<!--如果让canvas左右居中，使用display设置为block-->
    <canvas width="500" height="500" id="canvas">您的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
<script>
    var canvas =document.getElementById("canvas");
    var c=canvas.getContext('2d')
    //画坐标系
    c.beginPath();
    c.moveTo(100,100);
    c.lineTo(100,400);
    c.lineTo(400,400);
    c.stroke();
    c.closePath();
    //画矩形
    //fillRect(x,y,width,height) 绘制实心矩形
    //strokeRect(x,y,width,height) 绘制空心矩形
    for(let i=0;i<6;i++)
    {
        let height =Math.random()*280+10
        c.fillStyle='#'+parseInt(Math.random()*0xffffff).toString(16);
        c.fillRect(120+40*i,400-height,20,height); 
    }
</script>
</body>
</html>

3.2 清除画布

<!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>
    <style>
        canvas{
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>
<body>
<!--canvas在低版本浏览器中不兼容，需要提示用户--->
<!--如果让canvas左右居中，使用display设置为block-->
    <canvas width="500" height="500" id="canvas">您的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
<script>
    var canvas =document.getElementById("canvas");
    var c=canvas.getContext('2d')
    c.rect(100,100,300,200)
    //填充
    c.fillStyle='green';
    c.fill()
    //描边
    c.strokeStyle='red';
    c.lineWidth=5;
    c.stroke();
    //清除画布
    /**
     * clearRect(x,y,width,height); 清除画布
     * x 矩形左上角的 x 坐标
     * y 矩形左上角的 y 坐标
     * width 矩形的宽度，以像素计
     * height 矩形的高度，以像素计
     ** /
     */
     c.clearRect(120,120,120,100);
</script>
</body>
</html>

3.3 画圆

<!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>
    <style>
        canvas{
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>
<body>
<!--canvas在低版本浏览器中不兼容，需要提示用户--->
<!--如果让canvas左右居中，使用display设置为block-->
    <canvas width="500" height="500" id="canvas">您的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
<script>
    var canvas =document.getElementById("canvas");
    var c=canvas.getContext('2d')
    /**
     * x,y 描述弧的圆形的圆心的坐标
     * radius 描述弧的圆形的半径
     * startAngle，endAngle
     * 沿着圆指定弧的开始点和结束点的一个角度。这个角度用弧度来衡量。
     * 沿着x轴正半轴的三点钟方向的角度为，角度沿着逆时针方向而增加。
     * counterclockwise 弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历。
     * **/
    c.arc(250, 250, 200, 0, Math.PI *2, false);
    c.fillStyle='gold';
    c.fill();
    c.lineWidth=3;
    c.strokeStyle='blue'
    c.stroke();
</script>
</body>
</html>

3.4 画弧

<!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>
    <style>
        canvas{
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>
<body>
<!--canvas在低版本浏览器中不兼容，需要提示用户--->
<!--如果让canvas左右居中，使用display设置为block-->
    <canvas width="500" height="500" id="canvas">您的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
<script>
    var canvas =document.getElementById("canvas");
    var c=canvas.getContext('2d')
    /**
     * x,y 描述弧的圆形的圆心的坐标
     * radius 描述弧的圆形的半径
     * startAngle，endAngle
     * 沿着圆指定弧的开始点和结束点的一个角度。这个角度用弧度来衡量。
     * 沿着x轴正半轴的三点钟方向的角度为，角度沿着逆时针方向而增加。
     * counterclockwise 弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历。
     * **/
    c.beginPath();
    c.arc(100, 100, 100, 0, Math.PI, true);
    c.stroke();
    c.beginPath();
    c.arc(300, 100, 100, 0, Math.PI, false);
    c.stroke();
​
    c.beginPath();
    c.arc(250, 250, 100, 0, Math.PI*2, false);
    c.stroke();
    c.beginPath();
    c.arc(250, 250, 80, 0, Math.PI*2, false);
    c.stroke();
    c.beginPath();
    c.arc(250, 250, 120, 0, Math.PI*2, false);
    c.stroke();
​
</script>
</body>
</html>

4.实例画茶杯

<!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>
    <style>
        canvas{
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>
<body>
<!--canvas在低版本浏览器中不兼容，需要提示用户--->
<!--如果让canvas左右居中，使用display设置为block-->
    <canvas width="500" height="500" id="canvas">您的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
<script>
    var canvas =document.getElementById("canvas");
    var c=canvas.getContext('2d')
    
    //画杯身
    c.lineWidth=4
    c.strokeStyle='pink'
    c.strokeRect(100,200,200,200)
    //画把手
    drawCirle(300,300,50,10,false,'orange')
    function drawCirle(x,y,r,width,flag,color){
        c.beginPath();
        c.arc(x,y,r, -Math.PI/2, Math.PI/2, flag);
        c.lineWidth=width;
        c.strokeStyle=color || "#000"
        c.stroke();
    }
    // 画气
    // drawCirle(120,120,20,1,true)
    // drawCirle(120,160,20,1,false)
    for(let i=0;i<5;i++)
    {
        drawCirle(120+i*40,120,20,1,true,'gray')
        drawCirle(120+i*40,160,20,1,false,'gray')
    }
</script>
</body>
</html>

5.碰撞检测

5.1 圆形统计图

<!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>
    <style>
        canvas{
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>
<body>
<!--canvas在低版本浏览器中不兼容，需要提示用户--->
<!--如果让canvas左右居中，使用display设置为block-->
    <canvas width="500" height="500" id="canvas">您的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
<script>
    var canvas =document.getElementById("canvas");
    var c=canvas.getContext('2d')
​
    var deg=Math.PI*2/360;
​
    var count=0;
​
    var timer=setInterval(function(){
        count++;
        c.beginPath();
        c.arc(250,250,200, -Math.PI/2, count*deg-Math.PI/2, false);
        c.lineWidth=5;
        c.strokeStyle="#f00"
        c.stroke();
        if(count==360){
            clearInterval(timer);
        }
    },10)
</script>
</body>
</html>

5.2 碰撞检测

<!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>
    <style>
        canvas{
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>
<body>
<!--canvas在低版本浏览器中不兼容，需要提示用户--->
<!--如果让canvas左右居中，使用display设置为block-->
    <canvas width="500" height="500" id="canvas">您的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
<script>
    var canvas =document.getElementById("canvas");
    var c=canvas.getContext('2d')
    //画布的宽高
    var w=h=500;
​
    var x=100;
    var y=100;
    var r=30;
​
    //水平速度
    xSpeed=5
    //垂直速度
    ySpeed=3
​
    setInterval(function(){
        //清除画布
        c.clearRect(0, 0, w, h);
        /**
         * 在小球碰到边缘时，速度取相反即可！！
         * **/
        if(x-r<=0 || x+r>=w)
        {
            xSpeed=-xSpeed;
        }
         //水平运动
        x+=xSpeed;
        if(y-r<=0 || y+r>=h)
        {
            ySpeed=-ySpeed;
        }
        y+=ySpeed
      
        drawCirle(x,y,r);
    },10)
    /**
     * 画小球
     * */
    function drawCirle(x,y,r){
        c.beginPath();
        c.arc(x, y, r, 0, Math.PI*2, false);
        c.fillStyle ='orange'
        c.fill();
    }
</script>
</body>
</html>

5.3面向对象的小球

<!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>
    <style>
        canvas{
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>
<body>
<!--canvas在低版本浏览器中不兼容，需要提示用户--->
<!--如果让canvas左右居中，使用display设置为block-->
    <canvas width="500" height="500" id="canvas">您的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
<script>
    var canvas =document.getElementById("canvas");
    var c=canvas.getContext('2d')
    //画布的宽高
    var w=h=500;
​
​
    /**
     * 面向对象
     * **/
​
    function r(num){
        return Math.random()*num;
    }
    /**
     * x:起始x坐标
     * y:起始y坐标
     * r:小球半径
     * color:小球颜色
     * xSpeed:x水平速度
     * ySpeed:y水平速度
     * **/
    function Ball()
    {
        this.x=r(5)+60;
        this.y=r(3)+60;
​
        this.r=r(50)+10;
        this.color='#'+parseInt(Math.random()*0xffffff).toString(16);
        this.xSpeed=r(3)+2;
        this.ySpeed=r(3)+1;
    }
    //定义小球显示方法
    Ball.prototype.show =function(){
        c.beginPath();
        c.arc(this.x, this.y, this.r, 0, Math.PI*2, false);
        c.fillStyle =this.color;
        c.fill();
        
    };
    //定义小球运动的方法(碰撞检测)
    Ball.prototype.change=function(){
        if(this.x-this.r<=0 || this.x+this.r>=w)
        {
            this.xSpeed=-this.xSpeed;
        }
         //水平运动
        this.x+=this.xSpeed;
        if(this.y-this.r<=0 || this.y+this.r>=h)
        {
            this.ySpeed=-this.ySpeed;
        }
        this.y+=this.ySpeed
    };
    //创建一个小球的数组
    let  barrArr=[];
    //创造小球
    for(let i=0;i<50;i++)
    {
        let ball =new Ball();
        //放入数组
        barrArr.push(ball)
        ball.show();
    }
    //小球运动
    setInterval(function(){
        //清除画布
        c.clearRect(0,0,w,h);
      for(let i=0;i<barrArr.length;i++)
      {
        let ball=barrArr[i];
        //更新坐标,显示小球
        ball.change();
        ball.show();
      }  
    },10)
</script>
</body>
</html>

6. 画文字

6.1画文字与空心文字

<!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>
    <style>
        canvas{
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>
<body>
<!--canvas在低版本浏览器中不兼容，需要提示用户--->
<!--如果让canvas左右居中，使用display设置为block-->
    <canvas width="500" height="500" id="canvas">您的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
<script>
    var canvas =document.getElementById("canvas");
    var c=canvas.getContext('2d')
    /**
     * fillText()方法在画布上绘制填色的文本，默认颜色是黑色。
     * fillText(text,x,y,maxWidth);
     * text 规定在画布上输出的文本
     * x 开始绘制文本的x坐标位置(相对于画布)。
     * y 开始绘制文本的y坐标位置(相对于画布)。
     * maxWidth 可选，允许的最大文本宽度，以像素计。
     * **/
    //画文字
     //设置字体相关样式
    //font
    c.font='100px 微软雅黑'
    //设置文字颜色
    c.fillStyle='blue'
    c.fillText('Hello', 200, 250);
​
    /**
     * 绘制空心文字
     *  
     * **/
    c.strokeStyle='red'
    c.strokeText('你好', 0, 250);
​
    c.fillStyle='gold';
    c.fillText('Hello canvas!',100,100,300);
</script>
</body>
</html>

6.2 画线性渐变文字

<!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>
    <style>
        canvas{
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>
<body>
<!--canvas在低版本浏览器中不兼容，需要提示用户--->
<!--如果让canvas左右居中，使用display设置为block-->
    <canvas width="500" height="500" id="canvas">您的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
<script>
    var canvas =document.getElementById("canvas");
    var c=canvas.getContext('2d')
    
    c.font='100px 微软雅黑'
   
    //设置线性渐变
    var gradient=c.createLinearGradient(0, 0, canvas.width, 0);
    gradient.addColorStop("0", 'yellow');
    gradient.addColorStop("0.5", 'blue');
    gradient.addColorStop("1.0", 'red');
​
    //应用渐变
    c.strokeStyle=gradient;
    c.strokeText('胡歌 林依晨', 0,300,500);
    c.fillStyle=gradient;
    c.fillText('天外飞仙', 0,100,400);
</script>
</body>
</html>

6.3 文字位置

textAlign属性根据锚点，设置或返回文本内容的当前对齐方式。

textBaseline属性设置或返回在绘制文本时的当前文本基础。

<!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>
    <style>
        canvas{
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>
<body>
<!--canvas在低版本浏览器中不兼容，需要提示用户--->
<!--如果让canvas左右居中，使用display设置为block-->
    <canvas width="500" height="500" id="canvas">您的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
<script>
    var canvas =document.getElementById("canvas");
    var c=canvas.getContext('2d')
    
    /**
     * 画直线
     * **/
    c.beginPath();
    c.moveTo(250,0);
    c.lineTo(250,500);
    c.stroke();
    c.closePath();
    
    c.beginPath();
    c.moveTo(0,250);
    c.lineTo(500,250);
    c.stroke();
    c.closePath();
    c.font='40px 微软雅黑';
    c.textAlign='center';
    c.textBaseline='middle';
    c.fillText('射雕英雄传',250,250);
    /**
     * 水平文字的属性值 textAlign:start end left right center
     * 垂直文字的属性值 textBaseline:top Bottom Middle Alphabetic Hanging
     * 
     * **/
</script>
</body>
</html>

6.4 米字格

第一种方法：

<!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>
    <style>
        canvas{
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>
<body>
<!--canvas在低版本浏览器中不兼容，需要提示用户--->
<!--如果让canvas左右居中，使用display设置为block-->
    <canvas width="500" height="500" id="canvas">您的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
<script>
    var canvas =document.getElementById("canvas");
    var c=canvas.getContext('2d')
    //画垂直和水平线
    drawLine(0,250,500,250);
    drawLine(250,0,250,500);
    //画虚线
  
    for(let i=0;i<500;i+=10)
    {
        drawLine(i+0,i+0,i+5,i+5);
    }
    for(let i=0;i<500;i+=10)
    {
        drawLine(500-i,0+i,495-i,5+i);
    }
    //画文字
    drawText('米',250,250)
    /**
     * 画直线
     * **/
    function drawLine(x1,y1,x2,y2,color)
    {
        c.beginPath();
        c.moveTo(x1,y1);
        c.lineTo(x2,y2);
        c.strokeStyle=color || '#000';
        c.stroke();
        c.closePath();
    }
    //画文字
    function drawText(text,x,y)
    {
        c.font='400px 楷体';
        c.textAlign='center';
        c.textBaseline='middle';
        c.fillText(text,x,y);
    }
</script>
</body>
</html>

第二种方法：

<!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>
    <style>
        canvas{
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>
<body>
<!--canvas在低版本浏览器中不兼容，需要提示用户--->
<!--如果让canvas左右居中，使用display设置为block-->
    <canvas width="500" height="500" id="canvas">您的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
<script>
    var canvas =document.getElementById("canvas");
    var c=canvas.getContext('2d')
    //画垂直和水平线
    drawLine(0,250,500,250);
    drawLine(250,0,250,500);
    //画虚线
  
    c.setLineDash([5,5]);
    drawLine(0,0,500,500);
    drawLine(0,500,500,0);
    
    //画文字
    drawText('米',250,250)
    /**
     * 画直线
     * **/
    function drawLine(x1,y1,x2,y2,color)
    {
        c.beginPath();
        c.moveTo(x1,y1);
        c.lineTo(x2,y2);
        c.strokeStyle=color || '#000';
        c.stroke();
        c.closePath();
    }
    //画文字
    function drawText(text,x,y)
    {
        c.font='400px 楷体';
        c.textAlign='center';
        c.textBaseline='middle';
        c.fillText(text,x,y);
    }
    
</script>
</body>
</html>

7.画图片

<!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>
    <style>
        canvas{
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>
<body>
<!--canvas在低版本浏览器中不兼容，需要提示用户--->
<!--如果让canvas左右居中，使用display设置为block-->
    <canvas width="500" height="500" id="canvas">您的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
<script>
    var canvas =document.getElementById("canvas");
    var c=canvas.getContext('2d')
    //绘制图片
    /**
     * drawImage()
     * 在画布上绘制图像、画布或视频。
     * 也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。
     * 语法1：
     * 在画布上定位图像：
     * context.drawImage(img,x,y)
     * 语法2：
     * 在画布上定位图像，并规定图像的宽度和高度：
     * context.drawImage(img,x,y,width,height);
     * 语法3：
     * 剪切图像，并在画布上定位被剪切的部分:
     * context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
     * img 规定要使用的图像、画布或视频
     * sx 可选。开始剪切的x坐标位置。
     * sy 可选。开始剪切的y坐标位置。
     * swidth 可选。被剪切图像的宽度
     * sheight 可选。被剪切图像的高度。
     * x 在画布上放置图像的x坐标位置。
     * y 在画布上放置图像的y坐标位置。
     * width 可选。要使用的图像的宽度。(伸展或缩少图像)
     * height 可选。要使用的图像的高度。(伸展或缩小图像)
     * 
     * 
     * **/
    //绘制图片
    let img = new Image();
    img.src='squre.jpg';
    /**
     * onload:图片加载成功之后触发
     * onerror:图片加载失败后触发
     * **/
    img.οnlοad=function()
    {
        /**
         * 获取当前图片的实际宽高
         * **/
        console.log(img.width,img.height)
        /**
         * 1.语法:在画布上定位图像：
        context.drawImage(img,x,y)
         * **/
        //c.drawImage(img,100,100);
        /**
         *语法2：
        * 在画布上定位图像，并规定图像的宽度和高度：
        * context.drawImage(img,x,y,width,height);
         * **/
        //c.drawImage(img,0,0,400,250);
        /**
         * 语法3：
        * 剪切图像，并在画布上定位被剪切的部分:
        * context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
         * **/
        c.drawImage(img,0,0,100,100,250,250,100,100);
    }
</script>
</body>
</html>

8. 线性小球

<!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>
    <style>
      *{margin: 0;padding: 0;}
    </style>
</head>
<body>
<!--canvas在低版本浏览器中不兼容，需要提示用户--->
<!--如果让canvas左右居中，使用display设置为block-->
    <canvas id="canvas">您的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
<script>
    var canvas =document.getElementById("canvas");
    var c=canvas.getContext('2d')
    //画布的宽高
    let w=document.documentElement.clientWidth-6;
    let h=document.documentElement.clientHeight-6;
​
    //更新canvas的宽高
    canvas.width=w;
    canvas.height=h;
    /**
     * 面向对象
     * **/
​
    function r(num){
        return Math.random()*num;
    }
    /**
     * x:起始x坐标
     * y:起始y坐标
     * r:小球半径
     * color:小球颜色
     * xSpeed:x水平速度
     * ySpeed:y水平速度
     * **/
    function Ball(text)
    {
        this.x=r(380)+60;
        this.y=r(380)+60;
​
        this.r=r(20)+10;
        this.color='#'+parseInt(Math.random()*0xffffff).toString(16);
        this.xSpeed=r(3)+2;
        this.ySpeed=r(3)+1;
​
        //接受外部参数
        this.text=text
    }
    //定义小球显示方法
    Ball.prototype.show =function(){
        drawCirle(this.x,this.y,this.r,this.color)//画小球
        drawText(this.text,this.x+this.r+5,this.y)//画文字
        // c.beginPath();
        // c.arc(this.x, this.y, this.r, 0, Math.PI*2, false);
        // c.fillStyle =this.color;
        // c.fill();
        
    };
    //定义小球运动的方法(碰撞检测)
    Ball.prototype.change=function(){
        if(this.x-this.r<=0 || this.x+this.r>=w)
        {
            this.xSpeed=-this.xSpeed;
        }
         //水平运动
        this.x+=this.xSpeed;
        if(this.y-this.r<=0 || this.y+this.r>=h)
        {
            this.ySpeed=-this.ySpeed;
        }
        this.y+=this.ySpeed
    };
​
    let titleArr='JavaScript HTML前端 JAVA Python C++ VUE React NodeJs'.split(" ")
    //创建一个小球的数组
    let  barrArr=[];
    //创造小球
    for(let i=0;i<8;i++)
    {
        let ball =new Ball(titleArr[i]);//传入title
        //放入数组
        barrArr.push(ball)
        ball.show();
        /**
         * 小球连线 A球和B球
         * **/
        for(let j=0;j<i;j++)
        {
            let preBall=barrArr[j];
            drawLine(ball.x,ball.y,preBall.x,preBall.y);
        }
​
    }
    //小球运动
    setInterval(function(){
        //清除画布
        c.clearRect(0,0,w,h);
      for(let i=0;i<barrArr.length;i++)
      {
        let ball=barrArr[i];
        //更新坐标,显示小球
        ball.change();
        ball.show();
        for(let j=0;j<i;j++)
        {
            let preBall=barrArr[j];
            drawLine(ball.x,ball.y,preBall.x,preBall.y);
        }
      }  
    },10)
​
​
    function drawLine(x1,y1,x2,y2,color)
    {
        c.beginPath();
        c.moveTo(x1,y1);
        c.lineTo(x2,y2);
        c.strokeStyle=color || '#000';
        c.stroke();
        c.closePath();
    }
    //画文字
    function drawText(text,x,y)
    {
        c.font='20px 楷体';
        c.textAlign='top';
        c.textBaseline='middle';
        c.fillText(text,x,y);
    }
    
    function drawCirle(x,y,r,color){
        c.beginPath();
        c.arc(x, y, r, 0, Math.PI*2, false);
        c.fillStyle =color||'#000'
        c.fill();
    }
    
</script>
</body>
</html>

9.炫彩小球

<!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>
    <style>
      *{margin: 0;padding: 0;}
    </style>
</head>
<body>
<!--canvas在低版本浏览器中不兼容，需要提示用户--->
<!--如果让canvas左右居中，使用display设置为block-->
    <canvas id="canvas">您的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
<script>
    var canvas =document.getElementById("canvas");
    var c=canvas.getContext('2d')
    //画布的宽高
    let w=document.documentElement.clientWidth-6;
    let h=document.documentElement.clientHeight-6;
​
    //更新canvas的宽高
    canvas.width=w;
    canvas.height=h;
    /**
     * 面向对象
     * **/
​
    function r(num){
        return Math.random()*num;
    }
    /**
     * x:起始x坐标
     * y:起始y坐标
     * r:小球半径
     * color:小球颜色
     * xSpeed:x水平速度
     * ySpeed:y水平速度
     * **/
    function Ball(x,y)
    {
        this.x=x;
        this.y=y;
​
        this.r=30;
​
        this.color='rgb('+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)
       
    }
    //定义小球显示方法
    Ball.prototype.show =function(){
        this.r--;//半径越来越小
        drawCirle(this.x,this.y,this.r,this.color);//画小球
    };
    let ballArr=[];
    //鼠标滑动事件
    window.οnmοusemοve=function(ev){
        let ball=new Ball(ev.x,ev.y)
        ballArr.push(ball);
        ball.show();
    }
    //小球数组
    setInterval(function(){
        //清除画布
        c.clearRect(0, 0, w, h);
        for(let i=0;i<ballArr.length;i++)
        {
            /**
             * 判断：如果小球半径r已经小于0，需要从数组中删除
             * .splice(位置,1)
             * **/
            let ball=ballArr[i];
            if(ball.r<=0)
            {
                ballArr.splice(i,1)
            }
            else
            {
                ball.show();
            }
            
        }
        ball.show();
    },10);
    function drawCirle(x,y,r,color){
        c.beginPath();
        c.arc(x, y, r, 0, Math.PI*2, false);
        c.fillStyle =color||'#000'
        c.fill();
    }
</script>
</body>
</html>

10. 画时钟

<!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>
    <style>
      .clock{
        width: 400px;
        margin: 100px auto;
        background: #ddd;
        border-radius: 20px;
      }
    </style>
</head>
<body>
​
​
<div class="clock">
<!--canvas在低版本浏览器中不兼容，需要提示用户--->
<!--如果让canvas左右居中，使用display设置为block-->
    <canvas id="canvas" height="400px" width="400px">您的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
​
</div>
​
<script>
    var canvas =document.getElementById("canvas");
    var c=canvas.getContext('2d')
    //定义基础变量
    let w=h=400;//时钟宽高
    let x=y=200;//时钟中心坐标
    let r=180;//时钟半径
    let r_hour=60//时针长度
    let r_minute=120//分针长度
    let r_second=140//秒针长度
    let r_text=140;//定义表盘文字的半径
    let r_square=165//刻度
    let r_circle=10;//表盘小圆点
    let deg=2*Math.PI;//定义基本的圆周
    /**
     * 面向对象
     * **/
​
    //平移中心点
    c.translate(w/2, h/2);
    
    //画圆盘
    drawCirle(0,0,r,'#fff')
    //画时钟的表针
​
    //获取当前事件
    let time=new Date();
    let hour=time.getHours()*(deg/12)-deg/4;
    let minute=time.getMinutes()*(deg/60)-deg/4;
    let second=time.getSeconds()*(deg/60)-deg/4;
​
    drawLine(0,0,r_hour*Math.cos(hour),r_hour*Math.sin(hour),'#000',10)
    drawLine(0,0,r_minute*Math.cos(minute),r_minute*Math.sin(minute),'#000',5)
    drawLine(0,0,r_second*Math.cos(second),r_second*Math.sin(second),'#f00',2)
    //画表钉
    drawCirle(0,0,r_circle,'#000')
​
    //画数字
    for(let i=1;i<=12;i++)
    {
        /**
         * 计算圆周坐标
         * x=x+r*cos(a)
         * y=y+r*sin(a)
         * **/
        let a=((Math.PI*2)/12)*i-Math.PI/2
        let x=r_text*Math.cos(a)
        let y=r_text*Math.sin(a)
        drawText(i,x,y)
​
    }
    //画刻度
    for(let i=1;i<=60;i++)
    {
        let a=((Math.PI*2)/60)*i-Math.PI/2
        let x1=r*Math.cos(a)
        let y1=r*Math.sin(a)
        /*
        判断是否为整点
        **/
        if(i%5==0)
        {
            let x2=r_square*Math.cos(a)
            let y2=r_square*Math.sin(a)
            drawLine(x1,y1,x2,y2,'#999',3)
        }
        else
        {
            let x2=(r_square+4)*Math.cos(a)
            let y2=(r_square+4)*Math.sin(a)
            drawLine(x1,y1,x2,y2,'#aaa',2)
        }
        
    }
    function clock(){
        //画圆盘
    drawCirle(0,0,r,'#fff')
    //画时钟的表针
​
    //获取当前事件
    let time=new Date();
    let hour=time.getHours()*(deg/12)-deg/4;
    let minute=time.getMinutes()*(deg/60)-deg/4;
    let second=time.getSeconds()*(deg/60)-deg/4;
​
    drawLine(0,0,r_hour*Math.cos(hour),r_hour*Math.sin(hour),'#000',10)
    drawLine(0,0,r_minute*Math.cos(minute),r_minute*Math.sin(minute),'#000',5)
    drawLine(0,0,r_second*Math.cos(second),r_second*Math.sin(second),'#f00',2)
    //画表钉
    drawCirle(0,0,r_circle,'#000')
    //画数字
    for(let i=1;i<=12;i++)
    {
        /**
         * 计算圆周坐标
         * x=x+r*cos(a)
         * y=y+r*sin(a)
         * **/
        let a=((Math.PI*2)/12)*i-Math.PI/2
        let x=r_text*Math.cos(a)
        let y=r_text*Math.sin(a)
        drawText(i,x,y)
​
    }
    //画刻度
    for(let i=1;i<=60;i++)
    {
        let a=((Math.PI*2)/60)*i-Math.PI/2
        let x1=r*Math.cos(a)
        let y1=r*Math.sin(a)
        /*
        判断是否为整点
        **/
        if(i%5==0)
        {
            let x2=r_square*Math.cos(a)
            let y2=r_square*Math.sin(a)
            drawLine(x1,y1,x2,y2,'#999',3)
        }
        else
        {
            let x2=(r_square+4)*Math.cos(a)
            let y2=(r_square+4)*Math.sin(a)
            drawLine(x1,y1,x2,y2,'#aaa',2)
        }
        
    }
    }
​
    setInterval(function()
    {
        clock();
    },1000)
    function drawLine(x1,y1,x2,y2,color,width)
    {
        c.beginPath();
        c.moveTo(x1,y1);
        c.lineTo(x2,y2);
        c.lineWidth=width;
        c.strokeStyle=color || '#000';
        c.lineCap='round'
        c.stroke();
        c.closePath();
    }
    //画文字
    function drawText(text,x,y)
    {
        c.font='bold 26px 微软雅黑';
        c.fillStyle='#000'
        c.textAlign='center';
        c.textBaseline='middle';
        c.fillText(text,x,y);
    }
    
    function drawCirle(x,y,r,color){
        c.beginPath();
        c.arc(x, y, r, 0, Math.PI*2, false);
        c.fillStyle =color||'#000'
        c.fill();
    }
</script>
</body>
</html>

11. 像素操作和像素坐标

putImageData()
返回ImageData对象，该对象拷贝了画布指定矩形的像素数据。
对于ImageData对象中的每个像素，都存在着四方面的信息，即RGBA值：
R- 红色(0-255)
G- 绿色(0-255)
B- 蓝色(0-255)
A- alpha 通道(0-255;0是透明的,255是完全可见的)
color/alpha 以数组形式存在，并存储于ImageData对象的data属性中。
let imgData=context.getImageData(x,y,width,height);
参数描述
x开始复制的左上角位置的x坐标
y开始复制的左上角位置的y坐标
width将要复制的矩形区域的宽度
height将要复制的矩形区域的高度
putImageData()
putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
参数描述
imgData规定要放回画布的ImageData对象
xImageData对象左上角的x坐标，以像素计
yImageData对象左上角的y坐标，以像素计
dirtyX可选。水平值(x),以像素计，在画布上放置图像的位置
dirtyY可选。水平值(y),以像素计，在画布上放置图像的位置
dirtyWidth可选。在画布上绘制图像所使用的宽度。
dirtyHeight可选。在画布上绘制图像所使用的高度

11.1 复制图片

<!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>
    <style>
        canvas{
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>
<body>
<!--canvas在低版本浏览器中不兼容，需要提示用户--->
<!--如果让canvas左右居中，使用display设置为block-->
    <canvas width="500" height="500" id="canvas">您的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
<script>
    var canvas =document.getElementById("canvas");
    var c=canvas.getContext('2d')
   
    //创建图片
    let img = new Image();
    // img.crossOrigin=''
    img.src='squre.jpg';
    img.οnlοad=function(){
             
        c.drawImage(img,0,0,250,250);
        //绘制图片
        // c.drawImage(img,0,0);
        //获取像素点
        let copy = c.getImageData(100,100,50,50);
        console.log(copy)
        c.putImageData(copy,0,350);
    }
</script>
</body>
</html>

11.2 像素动态文字

11.2.1 静态像素文字

<!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>
    <style>
        canvas{
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>
<body>
<!--canvas在低版本浏览器中不兼容，需要提示用户--->
<!--如果让canvas左右居中，使用display设置为block-->
    <canvas width="500" height="500" id="canvas">您的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
<script>
    var canvas =document.getElementById("canvas");
    var c=canvas.getContext('2d')
    const w=h=500;
    //画文字
    drawText("心♥",w/2,h/2);
    //获取像素点
    let copy=c.getImageData(0,0,w,h)
    //清除画布
    c.clearRect(0,0,w,h);
    //筛选有效像素点
    let leap=3;
    for(let y=0;y<h;y+=leap){
        for(let x=0;x<w;x+=leap)
        {
            let index=x+y*w;
            let a=copy.data[index*4+3]
            if(a>128)
            {
                drawCirle(x,y,1,'#f00')
            }
        }
    }
    function drawCirle(x,y,r,color){
        c.beginPath();
        c.arc(x, y, r, 0, Math.PI*2, false);
        c.fillStyle =color||'#000'
        c.fill();
    }
​
    function drawText(text,x,y)
    {
        c.font='bold 150px 微软雅黑';
        c.fillStyle='#000'
        c.textAlign='center';
        c.textBaseline='middle';
        c.fillText(text,x,y,w);
    }
</script>
</body>
</html>

11.2.2 动态像素文字

<!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>
    <style>
        canvas{
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>
<body>
<!--canvas在低版本浏览器中不兼容，需要提示用户--->
<!--如果让canvas左右居中，使用display设置为block-->
    <canvas width="500" height="500" id="canvas">您的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
<script>
    var canvas =document.getElementById("canvas");
    var c=canvas.getContext('2d')
    const w=h=500;
    //画文字
    drawText("胡歌",w/2,h/2);
    //获取像素点
    let copy=c.getImageData(0,0,w,h)
    //清除画布
    c.clearRect(0,0,w,h);
    //筛选有效像素点
   
    //产生随机数
    function r(num){
        return parseInt(Math.random()*num);
    }
    //运动次数
    const times=100;
    function Ball(xEnd,yEnd)
    {
        //起始位置
        this.xStart=r(w);
        this.yStart=r(h);
        //结束位置
        this.xEnd=xEnd;
        this.yEnd=yEnd;
        //计算运动速度，通过起始点和结束点
        this.xSpeed=(this.xEnd-this.xStart)/times;
        this.ySpeed=(this.yEnd-this.yStart)/times;
        //小球运动的中心点
        this.x=this.xStart;
        this.y=this.yStart;
        
        //设置半径和颜色
        this.r=2;
        this.color='#f00';
    }
​
    Ball.prototype.show=function(){
        //计算每次运动坐标位置
        this.x+=this.xSpeed;
        this.y+=this.ySpeed;
        drawCirle(this.x,this.y,this.r,this.color);
    }
    
    let leap=10;
    let ballArr=[];
    for(let y=0;y<h;y+=leap){
        for(let x=0;x<w;x+=leap)
        {
            let index=x+y*w;
            let a=copy.data[index*4+3]
            if(a>128)
            {
                let ball=new Ball(x,y);
                ballArr.push(ball);
                ball.show();
                drawCirle(x,y,2,'#f00')
            }
        }
    }
    let count=0;
    let timer=setInterval(function(){
        count++;
        //清除画布
        c.clearRect(0,0,w,h);
        for(let i=0;i<ballArr.length;i++)
        {
            ballArr[i].show();
        }
        /*
        判断何时停止
        **/
        if(count+1==times)
        {
            clearInterval(timer);
        }
​
    },50)
   
    function drawText(text,x,y)
    {
        c.font='bold 250px 微软雅黑';
        c.fillStyle='#000'
        c.textAlign='center';
        c.textBaseline='middle';
        c.fillText(text,x,y,w);
    }
​
    function drawCirle(x,y,r,color){
        c.beginPath();
        c.arc(x, y, r, 0, Math.PI*2, false);
        c.fillStyle =color||'#000'
        c.fill();
    }
</script>
</body>
</html>

11.3 彩色心

<!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>
    <style>
        canvas{
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>
<body>
<!--canvas在低版本浏览器中不兼容，需要提示用户--->
<!--如果让canvas左右居中，使用display设置为block-->
    <canvas width="500" height="500" id="canvas">您的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
<script>
    var canvas =document.getElementById("canvas");
    var c=canvas.getContext('2d')
    const w=h=500;
    //画文字
    drawText("胡歌",w/2,h/2);
    //获取像素点
    let copy=c.getImageData(0,0,w,h)
    //清除画布
    c.clearRect(0,0,w,h);
    //筛选有效像素点
   
    //产生随机数
    function r(num){
        return parseInt(Math.random()*num);
    }
    //运动次数
    const times=100;
    function Ball(xEnd,yEnd)
    {
        //起始位置
        this.xStart=r(w);
        this.yStart=r(h);
        //结束位置
        this.xEnd=xEnd;
        this.yEnd=yEnd;
        //计算运动速度，通过起始点和结束点
        this.xSpeed=(this.xEnd-this.xStart)/times;
        this.ySpeed=(this.yEnd-this.yStart)/times;
        //小球运动的中心点
        this.x=this.xStart;
        this.y=this.yStart;
        
        //设置半径和颜色
        this.r=2;
        this.color='#f00';
        //设置填充文字和颜色
        this.text='♥'
        this.color='rgb('+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)
    }
​
    Ball.prototype.show=function(){
        //计算每次运动坐标位置
        this.x+=this.xSpeed;
        this.y+=this.ySpeed;
        // drawCirle(this.x,this.y,this.r,this.color);
        drawFillText(this.text,this.x,this.y,this.color);
    }
    
    let leap=10;
    let ballArr=[];
    for(let y=0;y<h;y+=leap){
        for(let x=0;x<w;x+=leap)
        {
            let index=x+y*w;
            let a=copy.data[index*4+3]
            if(a>128)
            {
                let ball=new Ball(x,y);
                ballArr.push(ball);
                ball.show();
                // drawCirle(x,y,2,'#f00')
            }
        }
    }
    let count=0;
    let timer=setInterval(function(){
        count++;
        //清除画布
        c.clearRect(0,0,w,h);
        for(let i=0;i<ballArr.length;i++)
        {
            ballArr[i].show();
        }
        /*
        判断何时停止
        **/
        if(count+1==times)
        {
            clearInterval(timer);
        }
​
    },50)
   
    function drawText(text,x,y)
    {
        c.font='bold 250px 微软雅黑';
        c.fillStyle='#000'
        c.textAlign='center';
        c.textBaseline='middle';
        c.fillText(text,x,y,w);
    }
​
    function drawCirle(x,y,r,color){
        c.beginPath();
        c.arc(x, y, r, 0, Math.PI*2, false);
        c.fillStyle =color||'#000'
        c.fill();
    }
    function drawFillText(text,x,y,color){
        c.font='12px 微软雅黑';
        c.fillStyle=color;
        c.textAlign='center';
        c.textBaseline='middle';
        c.fillText(text,x,y,w);        
    }
</script>
</body>
</html>

12.画矩形和统计图

12.1 画矩形

rect(x,y,width,height);绘制矩形
x 矩形左上角的x坐标
y 矩形左上角的y坐标
width 矩形的宽度，以像素计
height 矩形的高度，以像素计
fillRect(x,y,width,height);绘制实心矩形
strokeRect(x,y,width,height);绘制空心矩形
<!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>
    <style>
        canvas{
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>
<body>
<!--canvas在低版本浏览器中不兼容，需要提示用户--->
<!--如果让canvas左右居中，使用display设置为block-->
    <canvas width="500" height="500" id="canvas">您的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
<script>
    var canvas =document.getElementById("canvas");
    var c=canvas.getContext('2d')
    c.rect(10, 10, 200, 200);
    /**
     * 如果需要描边和填充时，先填充再描边
    */
    //填充
    c.fillStyle='orange'
    c.fill();
      //描边
      c.strokeStyle='gold';
    c.lineWidth=5;
    c.stroke();
    //绘制实心矩形
    c.beginPath();
    c.fillStyle='blue'
    c.fillRect(220,220,50,50)
    c.closePath();
    //绘制描边矩形
    c.strokeStyle='yellow'
    c.lineWidth=4
    c.strokeRect(300,300,100,100)
</script>
</body>
</html>

12.2 画统计图

<!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>
    <style>
        canvas{
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>
<body>
<!--canvas在低版本浏览器中不兼容，需要提示用户--->
<!--如果让canvas左右居中，使用display设置为block-->
    <canvas width="500" height="500" id="canvas">您的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>
<script>
    var canvas =document.getElementById("canvas");
    var c=canvas.getContext('2d')
   
   //画坐标系
   c.beginPath();
   c.moveTo(100,100);
   c.lineTo(100,400);
   c.lineTo(400,400);
   c.stroke();
   c.closePath();
   //画矩形
   c.fillRect(200,200,20,200);
   
</script>
</body>
</html>

浩淇害死猫
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas学习
in_uneventful的博客
06-11 265
Canvas <canvas> canvas元素一般有两个标签，width与height虽然说是可选的，当时如果不选择就默认为300像素与150像素显示（也可以使用css来定义大小，但是会出现画面比例与初始画布不一致从而导致的扭曲问题） 且元素本身有与普通图像一样的margin，border，background等属性 <canvas> 中间可以写一些当canvas无法使用时的替代标签 </canvas> 获取渲染上下文以及绘画功能（getContext） let ca
学习HTML5 Canvas这一篇文章就够了
热门推荐
完善飞跃
06-16 16万+
一、canvas简介&amp;amp;lt;canvas&amp;amp;gt; 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。 后来，有人通过Gecko内核的浏览器 (尤其是Mo
学习canvas
heartOfblack 离开了电脑，我不希望我还有病
07-15 317
本来这个东西是早就要学得了。但是我对动画不是特别感冒，所以一直没有去学习，这两天有朋友面试，说让他做实现一个gif图的效果，让我想想怎么实现比较好，不过我不懂canvas啊，不知道性能方面怎么样，但肯定是考这个，不然没什么好考的了。于是我动手写了下，代码是比较乱的，参数都是直接复制粘贴，因为我也是一边看文档一边写就随意了。很多数学的东西也忘了，还得查一下，心累。。。，以下是自己写的两个例子，算是初学
学习Canvas(canvas学习四)
这个博客记录我的成长。(专注前端开发，ehcarts图表开发，接定制)，有需要请站内私信。
06-04 309
学习canvas，画一个笑脸。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...
学习Canvas技术
小罗的博客
05-17 1003
一、什么是canvas 　　<canvas>标签是 HTML5 中的新标签，像所有的 dom 对象一样它有自己本身的属性、方法和事件。操作canvas的javascript API，它可以实现在网页中完成动态的2D与3D图像技术。 <canvas> 标记和 SVG以及 VML 之间的一个重要的不同是，<canvas> 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容易编辑与生成，但功能明显要弱
Canvas学习：Canvas入门准备
wulixiaoxiao1的博客
03-18 1883
由于工作的需要，最近开始在学习HTML5的canvas相关的知识。这里主要记录自己学习canvas相关的知识笔记。如果文章有不对之处，还请大婶们多多指正。 今天这篇文章是学习canvas的一些准备工作。 canvas元素 也是HTML中的一个元素，可以给这个元素添加一些HTML属性，比如使用width和height来控制其大小，也可以通过style给它设置一些基本样式。同样也可以它添加id名
canvas基础简单易懂教程（完结，多图）
forever
03-02 1722
Canvas API 提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。 Canvas API 主要聚焦于 2D 图形。而同样使用元素的 WebGL API 则用于绘制硬件加速的 2D 和 3D 图形。
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
01-19
我们用的最基本的绘图环境在canvas中绘图，通过调用canvas对象的getContext()方法来获取绘图环境。getContext()方法只需要一个参数：绘图环境的类型。在游戏中，我们使用2D类型的绘图环境。 获取canvas绘图环境 复制代码代码如下: <!–<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。–> <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-type” content=”text/html; charset = utf-8″> <title>HTML5</tit
html5学习canvas图像处理
mockingbirds的专栏
09-21 3786
上一篇博客主要学习了关于canvas的图性处理相关用法，这里所有的图形都是通过计算机进行绘制的，今天学些使用canvas来绘制以后的图像以及图像的部分处理操作。drawImage绘制图像到canvas可以使用drawImage来将图片绘制到canvas中，该方法有如下参数： drawImage(image,dx,dy) imgae :需要绘制的图片，dx，dy：表示绘制的图片左上角的x和y坐标
【HTML】【一文全解Canvas】从初学到实战，彻底掌握前端绘图神器！
最新发布
weixin_55846296的博客
06-09 9830
前言一、Canvas 概述二、在 HTML 中使用 Canvas三、Canvas 绘制图形1、绘制矩形2、绘制圆形a. 绘制实心圆形b. 绘制空心圆形四、Canvas 绘制文本五、Canvas 绘制图片六、Canvas 动画效果1、setInterval() 实现动画2、requestAnimationFrame() 实现动画七、Canvas 使用注意事项八、利用Canvas绘制挂钟（原理-绘制弧形）- 简单练习1、 还原坐标系2、 绘制背景3、 绘制时钟指针4、循环绘制。
HTML5 Canvas: 获取二维上下文，开始绘图
cshao的专栏
05-28 3287
原文： http://www.lifelaf.com/blog/?p=346 本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 1, “Retrieving the 2D Context, The drawScreen() Function”. 在保证浏览器对Canvas的支持之后，我们需要拿到Canvas的二维上下文(con
【canvas使用】
caigoutu的博客
09-09 2260
canvas使用
获取 Canvas 对象
caonumber的专栏
02-08 2236
procedure TForm1.Button1Click(Sender: TObject); var   cvs: TCanvas; begin   {PaintBox1 就像窗体一样, 也有 Canvas 属性}   PaintBox1.Canvas.Brush.Color := clRed;   PaintBox1.Canvas.FillRect(PaintBox1.ClientRect);
canvas 画布
ljj07220602的博客
08-30 1151
绘制轮廓矩形 参数 x轴起始位置 y轴起始位置 宽 高。canvas在页面设置出一块空白位置，为我们绘制涂写。
Canvas元素
ddd2501的博客
11-20 1803
Canvas元素的基础知识，好好学，好好看
JavaScript中阶 canvas
weixin_65257540的博客
03-17 1413
canvas · 语雀 创建画布 使用属性节点设置宽高，不要通过 CSS 去设置画布的大小。一个 html 中可以有多个画布。 <canvas width = "500" height = "500" id = "canvas"></canvas> 设置画笔 canvas 不像 svg 通过 html 属性画图，而是通过 js ，步骤： 添加 canvas 元素 在 js 中获取到 canvas 元素节点 获取到上下文创建 context 对象
HTML5 Canvas学习笔记：绘制图像与应用场景
"canvas笔记 资源 个人学习" HTML5中的`canvas`标签是一个强大的图形绘制工具，它为Web开发者提供了在浏览器中进行动态图形编程的能力。`canvas`这个名字来源于实际绘画中使用的画布，它是一个矩形区域，允许通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值