html：canvas画布绘图简单入门-1

canvas示例系列：

• html：canvas画布绘图简单入门-1
• html：canvas画布绘图简单入门-2
• html：canvas画布绘图简单入门-绘制时钟-3
• html：canvas画布绘图简单入门-刮刮乐-4

文档：

• https://www.runoob.com/tags/ref-canvas.html

示例1 绘制简单图形

    // 获取画布对象
    let canvas = document.querySelector('#canvas');

    // 获取 CanvasRenderingContext2D 上下文对象(画笔)
    let ctx = canvas.getContext('2d');
    console.log(ctx);

    // 绘制路径
    ctx.rect(50, 50, 50, 50);

    // 填充
    ctx.fillStyle = "green";
    ctx.fill();

    // 描边
    ctx.lineWidth = 20
    ctx.strokeStyle = 'red'
    ctx.stroke()

示例2：绘制图形和文本

    // 获取上下文
    let canvas = document.querySelector('#canvas');
    let ctx = canvas.getContext('2d');
    console.log(ctx);

    /* 设置线条属性 */
    ctx.lineWidth = 10; // 线条宽度
    ctx.lineCap = 'round'; // 端点样式 butt|round|square
    ctx.lineJoin = "round"; // 拐角样式  bevel|round|miter
    ctx.fillStyle = "green"; // 填充颜色
    ctx.strokeStyle = "red" //  画笔颜色

    /* 绘制三角形 */
    ctx.beginPath();
    ctx.moveTo(10, 10); // 设置起始点
    ctx.lineTo(10, 50);
    ctx.lineTo(50, 50);
    ctx.closePath() // 关闭路径，避免连笔

    ctx.stroke(); // 绘制路径
    ctx.fill(); // 填充

    /* 绘制矩形 */
    ctx.beginPath();
    ctx.moveTo(70, 10);
    ctx.lineTo(70, 50);
    ctx.lineTo(110, 50);
    ctx.lineTo(110, 10);
    ctx.closePath()

    ctx.stroke();
    ctx.fill();

    /* 绘制圆形 */
    ctx.beginPath();
    // （圆心x, 圆心y, 半径, 起始角[弧度计], 结束角[弧度计], false顺时针/true逆时针)
    ctx.arc(150, 30, 20, 0, 2 * Math.PI, false);
    ctx.closePath()

    ctx.stroke();
    ctx.fill();

    /* 绘制文本 */
    ctx.font = '40px 微软雅黑' // 字体属性
    ctx.lineWidth = 1; // 线条宽度
    
    ctx.shadowBlur = 20; // 阴影模糊级别
    ctx.shadowColor="black"; // 阴影颜色
    ctx.shadowOffsetX = 10; // 阴影水平距离
    ctx.shadowOffsetY = 20; // 阴影垂直距离

    ctx.fillText('Hello', 10, 100); // 绘制填充文本
    ctx.strokeText('Hello', 130, 100); // 绘制镂空文本

示例3：配合定时器实现弹幕效果

    
        // 获取上下文
        let canvas = document.querySelector('#canvas');
        let ctx = canvas.getContext('2d');
        console.log(ctx);

        ctx.font = "50px 微软雅黑"
        let x = 600;

        setInterval(() => {
            // 清空画布
            ctx.clearRect(0, 0, 600, 600);

            x -= 3;
            if (x 

    
        let canvas = document.querySelector('#canvas');
        let ctx = canvas.getContext('2d');

        // 绘制图像，注意：需要等图片载入后再绘制
        let img = new Image();
        img.onload = function () {
            ctx.drawImage(img, 0, 0)
        }
        img.src = 'https://www.runoob.com/wp-content/uploads/2013/11/img_the_scream.jpg';
    

示例5：绘制视频帧

    

    
        let canvas = document.querySelector('#canvas');
        let video = document.querySelector('#video');
        let ctx = canvas.getContext('2d');

        // 播放开始后，每隔16ms 绘制视频的当前帧
        let timer = null;
        video.onplay = function () {
            timer = setInterval(() => {
                ctx.drawImage(video, 0, 0)
            }, 16)
        }

        // 播放暂停和结束，清除绘制定时器
        function clearTimer() {
            clearInterval(timer);
        }

        video.onpause = clearTimer
        video.onended = clearTimer