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

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

image.png

<!-- 默认宽高: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>

示例2:绘制图形和文本

image.png


<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>

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

image.png


<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>

示例4:绘制图像

image.png


<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>

示例5:绘制视频帧


image.png

<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>
相关文章
|
2天前
|
移动开发 前端开发 JavaScript
HTML画布
HTML画布
16 0
|
9天前
|
移动开发 前端开发 API
HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发
【5月更文挑战第13天】HTML5 Canvas 提供丰富的绘图API,支持绘制图形、文本、渐变和图像,助力游戏开发。关键功能包括绘制基本形状、文本渲染、图像处理及渐变图案。在游戏开发中,Canvas用于绘制游戏元素、实现动画效果、精确的物理碰撞检测,并具有跨平台兼容性,为创造多样化视觉体验和互动游戏提供强大工具。随着技术进步,Canvas在游戏领域的应用将持续增长。
16 4
|
9天前
|
移动开发 前端开发 HTML5
HTML5 Canvas发光Loading源码
一款基于HTML5 Canvas的发光Loading加载HTML源码。Loading旋转图标是在canvas画布上绘制的,整个loading动画是发光3D的视觉效果
16 1
HTML5 Canvas发光Loading源码
|
9天前
|
移动开发 前端开发 HTML5
Canvas实现超酷Loading动画HTML代码
之前我们分享过很多基于CSS3的Loading动画效果,相信大家都很喜欢。今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动画特效。Loading旋转图标是在canvas画布上绘制的,整个loading动画是发光3D的视觉效果,HTML5非常强大。
14 1
Canvas实现超酷Loading动画HTML代码
|
9天前
|
移动开发 搜索推荐 JavaScript
【专栏:HTML 进阶篇】HTML5 新特性探索:视频、音频与画布
【4月更文挑战第30天】HTML5的视频、音频和画布元素为网页开发注入新活力。视频和音频元素提供跨平台兼容的播放体验,支持自适应和交互控制;画布则允许动态图形和动画创作。在线视频网站、音乐播放器和游戏开发广泛应用这些特性。尽管面临版权和性能挑战,HTML5持续发展,为网页创新带来更多可能。拥抱这些新特性,创造更丰富的网页世界!
|
9天前
|
移动开发 前端开发 HTML5
【专栏:HTML 基础篇】HTML 入门:从零开始构建你的第一个网页
【4月更文挑战第30天】本文引导初学者从零开始学习HTML,了解这种标记语言用于构建网页的基础知识。通过介绍HTML的基本结构,如文档类型声明、根标签、头部和主体,以及如何添加文本、设置标题、插入图片、创建链接、使用列表、制作表格和设计表单,帮助读者构建第一个网页。同时强调,结合CSS可实现网页的美化。
|
9天前
|
前端开发 JavaScript
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
前端 富文本编辑器原理——从javascript、html、css开始入门
31 0
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
|
9天前
|
前端开发 JavaScript 索引
前端 富文本编辑器原理——从javascript、html、css开始入门(一)
前端 富文本编辑器原理——从javascript、html、css开始入门
42 0
|
9天前
|
移动开发 自然语言处理 前端开发
《HTML 简易速速上手小册》第1章:HTML 入门(2024 最新版)
《HTML 简易速速上手小册》第1章:HTML 入门(2024 最新版)
20 0
|
Web App开发 移动开发 前端开发