canvas学习笔记

最新推荐文章于 2024-05-31 16:59:51 发布

张不大了

最新推荐文章于 2024-05-31 16:59:51 发布

阅读量151

点赞数

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

本文链接：https://blog.csdn.net/weixin_46054156/article/details/131956051

版权

canvas 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>
</head>
<style>
    .box{
        height: 500px;
        width: 500px;
        border: 1px solid;
    }
</style>
<body>
    <div class="box">
        <canvas id="canvasId" width="500" height="500"></canvas>
    </div>
</body>

绘制矩形

    /**
     * 绘制矩形
     * fillRect(x,y,width,height)  : 绘制一个填充的矩形
     * strokeRect(x,y,width,height) : 绘制一个矩形的边框
     * clearRect(x,y,width,height) : 清除指定的矩形区域，然后这块区域会变的完全透明
     * 
    */
    function drawRect() {
        var canvas = document.getElementById('canvasId');
        if(!canvas.getContext) return 
        var ctx = canvas.getContext("2d");
        // 绘制填充矩形
        // ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect(10, 10, 55, 50);
        // 绘制边框矩形
        ctx.strokeStyle = "#FF0000";
        ctx.strokeRect(55,50,55,50)
    }
    // drawRect();

绘制路径

    /**
     * 绘制路径
     * 
     * beginPath() 新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径
     * moveTo(x,y) 把画笔移动到指定的坐标(x,y)。相当于设置路径的起始点坐标
     * closePath() 闭合路径之后,图形绘制命令又重新指向到上下文中
     * stroke() 通过线条来绘制图形轮廓
     * fill() 通过填充路径的内容区域生成实心的图形 
     * 
    */
    function drawLine() {
        var canvas = document.getElementById('canvasId');
        if(!canvas.getContext) return
        var ctx = canvas.getContext('2d');
        ctx.beginPath(); // 新建一个path 路径
        ctx.moveTo(50,50); // 把画笔移动到指定的坐标
        ctx.lineTo(200,50); // 绘制一条从当前位置到指定坐标(200,50) 的直线
        ctx.closePath();
        ctx.stroke(); // 绘制路径
    }
    // drawLine()

绘制三角形边框

   /**
    * 绘制三角形边框
   */
    function drawAngle() {
        var canvas = document.getElementById('canvasId');
        if(!canvas.getContext) return
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.moveTo(50,50);
        ctx.lineTo(200,50);
        ctx.lineTo(200,200);
        ctx.closePath(); // 虽然我们只绘制了两条线段，但是closePath会closePath,仍然是一个三角形
        ctx.stroke(); // 描边绘制
        // 填充 绘制
        ctx.fill();
    }
    // drawAngle()

绘制圆弧

   /**
    * 绘制圆弧
    * 
    * arc(x,y,r,startAngle,endAngle,anticlockwise) 以(x,y) 为圆心，以r 为半径，从startAngle弧度开始到endAngle弧度结束。anticlosewise是布尔值，true表示逆时针,false表示顺时针
    * 
    * arcTo(x1,y1,x2,y2,radius) 根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点
    * 
   */

    function drawArc() {
        var canvas = document.getElementById('canvasId');
        if(!canvas.getContext) return
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.arc(50,50,40,0,Math.PI/2,false);
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(150,50,40,0,-Math.PI/2,true);
        ctx.closePath();
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(50,150,40,-Math.PI/2,Math.PI / 2,false);
        ctx.fill();

        ctx.beginPath();
        ctx.arc(150,150,40,0,Math.PI,false)

    }
    // drawArc();

添加样式和颜色

   /**
    * 添加样式和颜色
    * 
   */
    function drawColor() {
        var canvas = document.getElementById('canvasId');
        if(!canvas.getContext) return
        var ctx = canvas.getContext("2d");
        for(var i = 0; i < 6; i++) {
            for(var j = 0; j<6; j++) {
                ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' + Math.floor(255 - 42.5 * j) + ',0)';
                ctx.fillRect(j * 50, i*50,50,50)
            }
        }
    }
//    drawColor();

绘制随机颜色边框图形

/**
 * 绘制边框图形
 * 
*/
    function drawStrokeStyle() {
        var canvas = document.getElementById('canvasId');
        if(!canvas.getContext) return
        var ctx = canvas.getContext('2d');
        for( var i = 0; i<6;i++) {
            for(var j = 0; j<6; j++) {
                ctx.strokeStyle = `rgb(${randomInt(0,255)},${randomInt(0,255)},${randomInt(0,255)})`;
                ctx.strokeRect(j * 50,i * 50, 40, 40)
            }
        }
    }
    // drawStrokeStyle()

   /**
    * 返回随机的[from,to]之间的整数（包括from,也包括to）
    * 
   */
    function randomInt(from,to) {
        return parseInt(Math.random() * (to - from + 1) + from);
    }
    // drawStrokeStyle();

绘制文本

    /**
     * 绘制文本
     * fillText(text,x,y[,maxWidth]) 在指定的(x,y) 位置填充指定的文本， 绘制的最大宽度是可选的
     * strokeText(text,x,y[,maxWidth]) 在指定的(x,y) 位置绘制文本边框，绘制的最大宽度是可选的
     * 
    */
    function drawText() {
        var canvas = document.getElementById('canvasId');
        if(!canvas.getContext) return
        var ctx = canvas.getContext('2d');
        ctx.font = '100px sans-serif';
        ctx.fillText("天若有情",10,100);
        ctx.strokeText("天若有情",10,200);
    }
    // drawText();

绘制图片

    /**
     * 绘制图片
     * ctx.drawImage(img,0,0) 
     * 参数1 ： 要绘制的img
     * 参数2、3： 绘制的img 在 canvas中的坐标
     * 
     * 缩放图片
     * drawImage(image,x,y,width,height)
     * 
     * 图片切片（slice）
     * drawImage(image,sx,sy,swidth,sheight,dx,dy,dwidth,dheight)
     * 
    */
    function drawImage() {
        var canvas = document.getElementById('canvasId');
        if(!canvas.getContext) return
        var ctx = canvas.getContext('2d')
        var img = new Image();
        img.onload = function() {
            ctx.drawImage(img,0,0)
        }
        img.src = './face.jpg'
    }
    // drawImage()

图片的保存和恢复

    /**
     * 图片的保存和恢复
     * save() 和 restore()
     * canvas的状态就是当前画面应用的所有样式和变形的一个快照
     * 
    */
    function drawSaveRestore() {
        var canvas = document.getElementById('canvasId');
        if(!canvas.getContext) return
        var ctx = canvas.getContext('2d');
        ctx.fillStyle='green'
        ctx.fillRect(0,0,150,150);  // 使用默认设置绘制一个矩形
        ctx.save();  // 保存默认状态
        ctx.fillStyle = 'red';
        ctx.fillRect(15,15,120,120); 
        // ctx.save()
        ctx.restore();
        ctx.fillRect(45,45,60,60); // 使用上一次的配置绘制一个矩形
    }

变形

    /**
     * 变形
     * translate(x,y)
     * 用来移动canvas 的原点到指定的位置
     * 
    */

    function drawTranslate() {
        var canvas = document.getElementById('canvas');
        if(!canvas.getContext) return
        var ctx = canvas.getContext('2d');
        ctx.save(); // 保存坐标原点平移之前的状态
        ctx.translate(100,100);
        ctx.strokeRect(0,0,100,100);
        ctx.restore() //  恢复到最初的状态
        ctx.translate(220,220);
        ctx.fillRect(0,0,100,100)
    }
    // drawTranslate();

裁剪路径

    /**
     * 裁剪路径
     * clip()
     * 把已经创建的路径转换成裁剪路径
     * 裁剪路径的作用是遮罩。只显示裁剪路径内的区域，裁剪路径外的区域会被隐藏
     * clip() 只能遮罩在这个方法调用之后绘制的图像，如果是clip()方法调用之前绘制的图像， 则无法实现遮罩
     * 
    */
    var ctx;
    function drawClip() {
        var canvas = document.getElementById('canvasId');
        if(!canvas.getContext) return
        var ctx = canvas.getContext('2d');
        ctx.beginPath()
        ctx.arc(20,20,100,0,Math.PI * 2);
        ctx.clip();
        ctx.fillStyle = 'pink';
        ctx.fillRect(20,20,100,100)
    }
    // drawClip();