【canvas】-- H5新增标签canvas的简单用法

最新推荐文章于 2025-05-15 19:15:29 发布

愛 / 滥 / 時

最新推荐文章于 2025-05-15 19:15:29 发布

阅读量503

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JavaScript HTML5 前端文章标签： servlet javascript java 前端 html5

本文链接：https://blog.youkuaiyun.com/qq_48802092/article/details/126610227

前端同时被 3 个专栏收录

63 篇文章

订阅专栏

JavaScript

33 篇文章

订阅专栏

HTML5

4 篇文章

订阅专栏

本文介绍使用HTML5 Canvas元素绘制图形的基本方法，包括矩形、圆形、线性渐变、径向渐变等，还展示了如何移动图形及绘制图像、视频和文本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

♡ ‧₊˚ 基本用法 ‧₊˚ ♡

获取canvas对象--获取画布
取得上下文(context)--获取画笔
定义填充样式 / 定义轮廓样式
绘制填充图形 / 绘制填充图形

以下案例都是先在body里新建了一个宽高都为600px的canvas画布，再将案例里的代码放在script里执行：

    <canvas width="600px" height="600px"></canvas>

案例一：绘制一个矩形

            // 填充矩形
            window.onload=function(){
            // 1.获取画布
            var canvas = document.querySelector('canvas');
            // 2.获取画笔 上下文对象
            var content = canvas.getContext('2d');
            // 3.给图形设置填充样式
            content.fillStyle='pink'; // 实心填充
            // 4.绘制图形 绘制矩形
            // fillReact 参数: x轴起始位置, y轴起始位置, 宽, 高 
            content.fillRect(0,0,200,200)
        }
    

            // 轮廓矩形            
             window.onload=function(){
            // 1.获取画布
            var canvas = document.querySelector('canvas');
            // 2.获取画笔 上下文对象
            var content = canvas.getContext('2d');
            // 绘制轮廓矩形
            // 3.给图形设置填充样式
            content.strokeStyle='lightblue';
            // 给轮廓图形设置线宽
            content.lineWidth=10;
            //绘制轮廓矩形 参数: x轴起始位置, y轴起始位置, 宽, 高 
            content.strokeRect(100,100,200,200);
        }

案例二：绘制一个圆形

注意：Math.PI 就代表180°，如果我们需要360°，则直接用Math.PI*2，如果我们需要60°，则直接用Math.PI/3

        window.onload=function(){
            // 1.获取画布
            var canvas=document.querySelector('canvas');
            // 2.获取上下文对象
            var content=canvas.getContext('2d');
            // 3.需要给一个开始路径
            content.beginPath();
            // 4.绘制圆 arc参数：x y开始的位置 r半径 开始弧度 Math.PI(180度) 结束弧度 布尔值（默认false顺时针，true为逆时针）
            content.arc(100, 100,100,0,Math.PI*2, true)
            // 5.绘制圆的样式
            content.fillStyle='yellow'
            // 6.绘制圆形
            content.fill();
            // 7.需要给结束路径
            content.closePath();
        }

如果需要绘制轮廓圆，也只需要像轮廓矩形那样将 fill 改成 srtoke，其他步骤都一样：

                // 绘制轮廓圆
                content.strokeStyle='black';
                // 绘制轮廓圆
                content.stroke();

案例三：圆的移动

在这里我们需要先知道如何清除画布区域：

            // 清除画布部分区域
            content.clearRect(100,100,50,50)
            // 清除画布全部区域
            content.clearRect(0,0,400,400)

接下来进行圆的移动：

        window.onload=function(){
            // 1.获取画布
            var canvas=document.querySelector('canvas');
            // 2.获取上下文对象
            var content=canvas.getContext('2d');
            var obj = {
                x:100,
                y:100,
                r:100,
                color:'green'
            };
            // 声明绘制圆的方法
            function draw(obj){
                content.beginPath();
                content.arc(obj.x,obj.y,obj.r,0,Math.PI*2);
                // 绘制填充⚪样式
                // content.fillStyle=obj.color;
                // 绘制圆
                content.fill();
                content.closePath();
            }
            // 声明移动圆的方法
            function move(obj){
                // 表示每次都向x轴与y轴移动5px
                obj.x+=5;
                obj.y+=5;
                draw(obj);
            }
            // 设置一个定时器，后面的参数500为0.5秒移动一次
            setInterval(function(){
                // 清除原先的圆
                content.clearRect(0,0,600,600);
                move(obj);
            },500);
            draw(obj);
        }

案例四：线性渐变

        window.onload=function(){
            // 1.获取画布
            var canvas=document.querySelector('canvas');
            // 2.获取上下文对象
            var content=canvas.getContext('2d');
            // 3.绘制一个线性渐变图形
            // 3.1创建一个线性渐变对象
            // createLinearGradient(四个参数) 参数：渐变x、y轴开始位置 渐变结束x、y轴位置
            var L = content.createLinearGradient(0,0,400,400)
            // 3.2给渐变图形填充颜色
            L.addColorStop(0,'lightpink');
            L.addColorStop(0.2,'lightyellow');
            L.addColorStop(0.3,'lightgreen');
            L.addColorStop(0.5,'lightpink');
            L.addColorStop(0.8,'lightskyblue');
            L.addColorStop(1.0,'lightblue');
            // 4.将渐变对象给到图形填充样式
            content.fillStyle=L;
            // 5.绘制填充图形
            content.fillRect(0,0,400,400);
        }

实现效果如下：

案例四：径向渐变（同心圆渐变）

            window.onload=function(){
            // 1.获取画布
            var canvas=document.querySelector('canvas');
            // 2.获取上下文对象
            var content=canvas.getContext('2d');
            // 3.绘制一个径向渐变图形
            // 3.1创建一个径向渐变对象
            // createRadialGradient(),参数：小圆 x y r  大圆 x y r
            var g = content.createRadialGradient(200,200,100,200,200,200)
            // 3.2给径向渐变图形填充颜色
            g.addColorStop(0,'lightpink');
            g.addColorStop(0.2,'pink');
            g.addColorStop(0.4,'lightyellow');
            g.addColorStop(0.6,'lightgreen');
            g.addColorStop(0.8,'lightpink');
            g.addColorStop(1.0,'lightblue');
            // 4.将渐变对象给到图形填充样式
            content.fillStyle=g;
            // 5.绘制填充图形
            content.fillRect(0,0,400,400);
        }

实现效果如下：

案例五：绘制线段

            window.onload=function(){
            var canvas=document.querySelector('canvas')
            var content = canvas.getContext('2d')
            content.lineWidth=8;
            // 线段开始路径
            content.beginPath();
            // 绘制线段 从哪里开始 从哪里结束
            content.moveTo(0,0);
            content.lineTo(100,100);
            content.lineTo(300,10);
            content.lineTo(300,100);
            // 设置颜色
            content.strokeStyle='cyan';
            // 绘制线段
            content.stroke();
            content.closePath();
        }

实现效果如下：

案例六：绘制图像 / 视频 / 文本

          window.onload=function(){
            var canvas=document.querySelector('canvas')
            var content = canvas.getContext('2d')
            // 创建一个img标签 构造函数方式new Image()
            var img = new Image();
            console.log(img);
            img.src="./音视频/音视频/3.jpg";
            // 绘制图片 参数：要绘制的图片/视频，开始的x，y轴位置，宽高
            img.onload=function(){
            content.drawImage(img, 0,0,300,200)
            }
        }

绘制视频：

            // 绘制视频
            var video=document.querySelector('video');
            function draw(){
                content.drawImage(video,0,0,300,300)
                // 请求动画帧
                requestAnimationFrame(draw);
               //告诉浏览器你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定得回调函数更新动画
            }
            draw();

绘制文本：

            // 绘制文本
            content.font='18px bold';
            // 参数：文本，x y起始位置
            content.fillText('Hello',100,100)
            content.strokeText('Hello',100,100)