第十一篇canvas基础

最新推荐文章于 2025-07-22 20:32:24 发布
原创 最新推荐文章于 2025-07-22 20:32:24 发布 · 1.9k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #html #webview

这篇博客介绍了HTML5 Canvas的基础用法，包括如何使用JavaScript在Canvas上绘制线段、矩形和三角形，并探讨了DOM节点的操作，如创建、删除和替换元素。

一、基础介绍

       canvas 是一块画布，可以在上面绘制图像。使用 HTML5 的 canvas 来画画。使用 JavaScript 进行图像绘制canvas 基础绘制线段， <canvas> 标签只是图形容器，必须使用脚本来绘制图形。可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。<canvas> 标签定义图形，比如图表和其他图像，必须使用脚本来绘制图形。例如在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字等。

二、绘制线段

示例代码:

<!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>第十一篇 JS canvas</title>
    <style>
    canvas{
    background-color:cadetblue;
    }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
</body>
</html>

运行结果:

 代码解析:

        在 head 部分添加了一个 style，在 style 里添加了一个 canvas 的背景色样式，这是为了给 canvas一个背景色以便查看。不然的话画布颜色跟界面颜色一样，难以分辨；

        canvas 元素需要给予一些宽高和ID的基本属性

        让我们进一步看看 canvas 如何使用

实例代码:

<!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>第十一篇 JS canvas</title>
    <style>
        canvas{
            background-color:cadetblue;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <script>
        var canvas=document.getElementById('myCanvas');//通过 getElementById 取得对应 canvas 对象
        var context=canvas.getContext('2d');//表示需要绘制图像的类型为2d
        context.beginPath();//充值画布路径，路径就是我们画的线段、线条
        context.moveTo(100,100);//下笔点移动到某一个位置
        context.lineTo(200,200);//从下笔点绘制一条线段到 xy 坐标为 200 的地方
        context.stroke();//开始绘制
    </script>
</body>
</html>

运行结果:

 代码解析:

        var canvas=document.getElementById('myCanvas'); 表示得到 id 为 myCanvas 的 dom 节点，这个节点为一个 canvas 标签，那么此时变量 canvas 就表示这个 canvas 标签; 也就是这是个 canvas 的对象，那么就可以使用这个对象所对应的一些功能;

        var context=canvas.getContext('2d'); 这句代码中的 canvas 对象指对应的画布对象，因为刚刚使用了 getbyID 函数获取到了对应的节点，此时这个 canvas 就表示这个节点通过 getContext 指定当前所需要绘制的图片类型，在这里传入了参数为 2d，表示下面以 2d 绘制为主。

        context.beginPath(); 这句代码表示“清空画布”，也就是重置画布内容，让画布显示干净些。

        context.moveTo(100,100); 这句代码表示将下笔的点移动到 （x，y） 为 （100，100） 处。

        context.lineTo(200,200); 这句代码结合之前使用 moveTo 找到了一个洛必点，现在的 lineTo 是画一条直线，把这一条直线画到指定坐标点，也就是 （x，y）为（200，200 ） xy 坐标。

        context.stroke(); 表示开始绘制，之前所写的代码都只是在描述要绘制的步骤，最后一步代码才表示将要绘制的路径进行绘制，就像胸有成竹，心中先有竹子的样子，画竹子的步骤，最后再把竹子画出来。

三、矩形绘制

代码实例:

<!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>第十一篇 JS </title>
    <style>
        canvas{
            background-color:cadetblue;
        }
    </style>
</head>
<body>
    <canvas id="myCanvasa" width="500" height="500"></canvas>
    <script>
        var canvas=document.getElementById('myCanvasa');
        var context=canvas.getContext('2d');
        context.beginPath();
        context.fillRect(10,10,300,400);
    </script>
</body>
</html>

运行结果:

 代码解析:

        这里不用 stroke 函数进行绘制了，直接使用 fillRect 函数绘制一个矩形，这个矩形以（x,y)为（10，10 ）的点做起始绘制坐标， 300 和 400 分别是矩形对应的宽和高。

修改颜色:

        添加 fillStyle 属性即可，如   

<script>

        var canvas=document.getElementById('myCanvasa');

        var context=canvas.getContext('2d');

        context.fillStyle = "#0000ff";

        context.beginPath();

        context.fillRect(10,10,300,400);

    </script>

  

运行结果：

去掉填充颜色：

        将 fillRect 函数替换为 strokeRect 函数，fillRect 表示填充绘制矩形 strokeRect 表示不填充。

 <script>

        var canvas=document.getElementById('myCanvasa');

        var context=canvas.getContext('2d');

        context.beginPath();

        context.strokeRect(10,10,300,400);

    </script>

运行结果：

         可以看到有个线条圈出了矩形，也可以修改线条颜色，需要给予 strokeStyle 属性设置一个颜色即可，例如 context.strokeStyle = "#ff0000";;

<script>

        var canvas=document.getElementById('myCanvasa');

        var context=canvas.getContext('2d');

        context.strokeStyle = "#ff0000";

        context.beginPath();

        context.strokeRect(10,10,300,400);

    </script>

运行结果：

四、三角形绘制

代码示例:

<!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>
<body>
    <canvas id="tCanvasa" width="300" height="300"></canvas>
    <script>
        var canvas=document.getElementById('tCanvasa');//通过 getElementById 查找取得对应的 canvas 对象
        var context=canvas.getContext('2d');//指定了您想要在画布上绘制的类型
        context.lineTo(30, 30);
        context.lineTo(30, 180);
        context.lineTo(180, 180);
        context.lineTo(30, 30);
        context.stroke();
    </script>
</body>
</html>

运行结果:

 

代码解析:

      绘制三角形我们需要懂得线段绘制的概念，上面代码里，先把起始点放在了（x，y）都是 30处，然后绘制一条线段到坐标点为 （30,180 ）处，此时是一条垂直的直线，接着再从（30,180） 处绘制一条直线到 （180,180） ，这时就有三角形的两条边，最后再从 （180，180） 处返回最先落笔点（30，30），这样三角形就绘制完啦；

      注意！一定要在路径编写完代码后添加 stroke 函数。

填充颜色，需要添加 fill 函数：context.fill();

<script>

        var canvas=document.getElementById('tCanvasa');//通过 getElementById 查找取得对应的 canvas 对象

        var context=canvas.getContext('2d');//指定了您想要在画布上绘制的类型

        context.lineTo(30, 30);

        context.lineTo(30, 180);

        context.lineTo(180, 180);

        context.lineTo(30, 30);

        context.fill();

        context.stroke();

    </script>

填充结果：

 

改变填充色:

        使用 fillStyle ，例如 context.fillStyle = "#0000ff";，注意！线段闭合才能填充颜色。

<script>

        var canvas=document.getElementById('tCanvasa');//通过 getElementById 查找取得对应的 canvas 对象

        var context=canvas.getContext('2d');//指定了您想要在画布上绘制的类型

        context.lineTo(30, 30);

        context.lineTo(30, 180);

        context.lineTo(180, 180);

        context.lineTo(30, 30);

        context.fillStyle = "#0000ff";

        context.fill();

        context.stroke();

    </script>

修改结果:

        

拓展：

dom 节点：

        DOM 节点是指在XML文档中的每个成分都是一个节点，整个文档就是一个文档节点，每个XML标签是一个元素节点。

创建新 HTML 元素（节点）

        如需向 HTML DOM 添加新元素，必须先创建这个元素（元素节点），然后将其追加到已有的元素。

（1）appendChild() 方法，追加新元素作为父的最后一个子。

代码示例:

<!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>第十一篇 JS canvas</title>

    <style>

        canvas{

            background-color:cadetblue;

        }

    </style>

</head>

<body>

    <div id="div1">
        <p id="p1">这是一个段落。</p>
        <p id="p2">这是另一个段落。</p>
        </div>
        
        <script>
        var para = document.createElement("p");//创建了一个新的 <p> 元素
        var node = document.createTextNode("这是新文本。");//因为要向 <p> 元素添加文本，所以必须先创建文本节点。这段代码创建了一个文本节点
        para.appendChild(node);//用 appendChild 向 <p> 元素追加这个文本节点
        
        var element = document.getElementById("div1");//查找一个已有的元素
        element.appendChild(para);//用 appendChild 向这个已有的元素 div 追加新元素
        </script>

</body>

</html>

运行结果:

（2）使用 insertBefore() 方法：

代码示例:

<!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>第十一篇 JS canvas</title>

    <style>

        canvas{

            background-color:cadetblue;

        }

    </style>

</head>

<body>

    <div id="div1">
        <p id="p1">这是一个段落。</p>
        <p id="p2">这是另一个段落。</p>
        </div>
        
        <script>
        var para = document.createElement("p");
        var node = document.createTextNode("这是新文本。");
        para.appendChild(node);
        
        var element = document.getElementById("div1");
        var child = document.getElementById("p1");
        element.insertBefore(para, child);//用 insertBefore 向这个已有的元素<p> ID p1 前添加doc节点（添加新元素）
        </script>

</body>

</html>

运行结果:

 

删除已有 HTML 元素

        删除某个 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>第十一篇 JS canvas</title>

    <style>

        canvas{

            background-color:cadetblue;

        }

    </style>

</head>

<body>
    <!-- HTML 文档包含了一个带有两个子节点（两个 <p> 元素）的 <div> 元素 -->
    <div id="div1">
        <p id="p1">这是一个段落。</p>
        <p id="p2">这是另一个段落。</p>
        </div>
        
        <script>
        var parent = document.getElementById("div1");//查找 id="div1" 的元素 赋值给名为 parent 的变量
        var child = document.getElementById("p1");//查找 id="p1" 的 <p> 元素 赋值给名为 child 的变量
        parent.removeChild(child);//从父元素里删除子元素
        </script>

</body>

</html>

运行结果：

替换 HTML 元素

        使用 replaceChild() 方法

示例代码：

<!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>第十一篇 JS canvas</title>

    <style>

        canvas{

            background-color:cadetblue;

        }

    </style>

</head>

<body>
    <div id="div1">
        <p id="p1">这是一个段落。</p>
        <p id="p2">这是另一个段落。</p>
        </div>
        
        <script>
        var para = document.createElement("p");
        var node = document.createTextNode("这是新文本。");
        para.appendChild(node);
        
        var parent = document.getElementById("div1");
        var child = document.getElementById("p1");
        parent.replaceChild(para, child);
        </script>

</body>

</html>

运行结果：

 

参考自:

【前端就业课 第一阶段】HTML5 零基础到实战（十一）canvas 基础_1_bit 的博客-CSDN博客

https://www.runoob.com/html/html5-canvas.html

JavaScript HTML DOM 元素（节点）

SVG DOM绘制线段
MggnHaskell的博客
10-06 190
在SVG中，可以使用DOM API来绘制各种类型的图形，包括线段。通过创建SVG元素、创建线段元素并设置属性，最后将线段添加到SVG容器中，就能在SVG画布上显示出线段。通过修改代码中的属性值，可以调整线段的位置、长度、颜色和样式。例如，将起点坐标(x1, y1)改为(200, 100)，终点坐标(x2, y2)改为(200, 300)，线段将变为一条垂直线段。最后，将线段元素添加到SVG容器中，线段就会显示在SVG画布上。接下来，可以使用DOM API创建线段元素，并设置其属性来定义线段的位置和样式。
HTML 进阶-第十一篇：HTML5图形绘制-Canvas基础（一）
无
04-13 84
canvas>元素是 HTML5 中一项强大的新增功能，它为开发者提供了在网页上进行图形绘制的能力。通过结合 JavaScript，我们能够创建出各种复杂的图形、动画以及交互式可视化内容。
JavaScript 笔记（十一）：Canvas
0lonely0
10-01 2034
JavaScript 笔记（十一）：Canvas
Canvas 2d和DOM元素下画九宫格
飓风kk的博客
06-22 401
九宫格图片： 保持四个角不受图片缩放影响，上下横向矩形部分水平缩放，左右竖向矩形垂直缩放，中间部分水平和垂直均会收到缩放影响。 1.Canvas canvas下采用drawImage API，通过原始图片的左右上下偏移量，裁剪需要获得的像素块，并在新定义的区域内展示（伴随缩放） API ctx.drawImage(img, sx, sy, sWidth, sHeight, tx, ty, tWidth, tHeight); sx sy: 原图中的起始点 sWidth, sHeight: 原图从起始点开始的区
canvas-绘制功能
weixin_41040445的博客
12-13 471
中文文档 1、绘制矩形 <script> //获取dom var canvas = document.getElementById("mycanvas"); //获取上下文 var ctx = canvas.getContext("2d"); //设置颜色 ctx.fillStyle = "blue"; //填充矩形 ctx.fillRect(100,100,10
css的动画和canvas操作DOM
m0_61998604的博客
05-23 842
CSS动画和Canvas都可以用于操作DOM，但它们的方式和目的略有不同
HTML 进阶-第十二篇：HTML5图形绘制-Canvas基础（二）
无
04-13 80
在使用<canvas>元素进行 2D 图形绘制时，首先需要获取其 2D 绘图上下文。这可以通过调用<canvas>元素的方法来实现。iflog'成功获取 2D 绘图上下文';elselog'浏览器不支持 2D 绘图上下文';</</</在上述代码中，首先通过获取到<canvas>元素，然后调用其方法获取 2D 绘图上下文，并将其存储在ctx变量中。
第三十七篇 iOS Canvas绘图功能实现指南
最新发布
I_did_it的博客
07-22 413
通过Core Graphics框架，我们可以实现功能丰富的绘图应用。
HTML应用开发基础篇-Canvas画布
徐小mu的博客
09-09 274
具体也不详细说那么多，直接看代码吧： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas基础操作</canvas></title> <style type="text/css"> canvas{ ...
Canvas设计图片编辑器全讲解（一）Canvas基础（万字图文讲解）
liuyongshun2的博客
05-19 1283
AI发展，促使图片创作提升，前端在视觉方向的技术有更好的发展机会
dom -> canvas
[暂停使用]任先阳
05-07 467
前端图形、算法这块还差很多，身处一个注重UI的公司，先从常用的图形开始··· #1、ctx = element.getContext('2d'); 让元素可以绘图。 #2、ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height) 【引】dom -&gt; canvas：https://blog.csdn.net/u01008168...
HTML5 canvas绘图基本使用方法
热门推荐
诗渊的博客
06-26 7万+
本文介绍了html5 中canvas标签的基本使用方法，详细讲解了其重要的属性和方法
canvas绘制图片节点，报错的解决方法，涉及this指向问题
bbt953的博客
11-23 1425
//首先是canvas绘制图片节点的过程，vue项目 <script> import 自定义img变量名 from '引入的图片地址'; //引入图片 export default { data() { return { ctx: null, width: 2000, height: 1000, } }, created(){ this.initchart(); }, methods: { initchart(){
canvas js 绘图插件_将你的 Virtual dom 渲染成 Canvas
weixin_39541212的博客
11-25 510
来源：https://zhuanlan.zhihu.com/p/39886896项目概述一个基于 vue 的 virtual dom 插件库，按照Vue render 函数的写法，直接将 Vue 生成的 Vnode 渲染到 canvas 中。支持常规的滚动操作和一些基础的元素事件绑定。demo 地址：https://muwoo.github.io/vnode2canvas/背景从一个小的需求说起：...
javascript中canvas绘图的基本用法
qq_31984915的博客
11-08 961
是HTML里面非常强大的元素，利用它结合js可以实现很多动画效果，大大增强交互性。下面，我想用图文并茂的方式阐述一下canvas的绘图机制的基础内容，话不多说，先上代码： HTML的内容很简单，就是一个画布canvas，其中width和height属性指定了画布的宽和高，并且我设置background为蓝色 以下为javascript的代码：首先是从DOM中获取canv
HTML中使用canvas绘制点和线
liberty888的博客
07-20 1093
HTML中使用canvas绘制点和线
【canvas】canvas基础使用（二）：使用canvas路径绘制点、线、面
qq_2511276124的博客
04-08 3761
学习canvas路径绘制点、线、面的api。
前端提高篇(六十六)：HTML进阶7：canvas画布基本知识（一）
安之ccy的博客
03-21 1002
1.canvas是html5中新提出的元素，相当于一个画布，可以在这个画布上绘制图形或动画 2.之前做的动画是用了好多个dom元素拼成图案，用js控制这些元素构成一个动画，而canvas提供了API，里面有很多相关的方法和属性，js通过使用这些方法、属性来绘制图案或制作动画，图案和动画都只在canvas这一个元素上操作，就像画布一样，容纳很多图案 3.如果一个动画比较复杂，首先应该考虑用canvas，用原先的js来绘制，浏览器需要对大量的dom元素进行重排、重绘、计算、渲染操作，而用canvas来做，就只要
canvas基本操作
丰空岛主(Vega Prime,Android,LabWindows,ThreeJS,Python,OpenCV）
12-16 2237
创建一个画布（Canvas） 一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制. 注意:默认情况下 <canvas> 元素没有边框和内容。 <canvas>简单实例如下: <canvas id="myCanvas" width="200" height="100"></canvas> 注意:标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小. 提示:你可以在HTML..
HTML课程第十一篇教程要点解析
资源摘要信息:"lesson__11" 由于提供的文件信息中，标题、描述以及压缩包子文件的文件名称列表均相同，均为 "lesson__11"，并且标签为 "HTML"，我们可以推断这是一个关于HTML的教程或课程。然而，由于缺少具体的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值