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

<!-- 默认宽高：300x150 -->
<canvas id="canvas"
        width="300"
        height="150"></canvas>
<script>
    // 获取画布对象
    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()
</script>

<canvas id="canvas"></canvas>
<script>
    // 获取上下文
    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); // 绘制镂空文本
</script>

<canvas id="canvas"
            width="600"
            height="600"></canvas>
    <script>
        // 获取上下文
        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 < -300) {
                x = 600;
            }
            ctx.fillText('Hello World', x, 100);
            ctx.strokeText('你好，世界', x, 200);
        }, 16)
    </script>

<canvas id="canvas"
            width="600"
            height="600"></canvas>
    <script>
        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';
    </script>

<canvas id="canvas"
            width="600"
            height="600"></canvas>
    <video id="video"
           src="https://www.runoob.com/wp-content/uploads/2013/11/mov_bbb.mp4"
           controls></video>
    <script>
        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
    </script>