Html利用Canvas绘制图形

最新推荐文章于 2024-09-08 13:13:25 发布
最新推荐文章于 2024-09-08 13:13:25 发布
阅读量408 收藏 3
点赞数
文章标签： html 前端
原文链接：https://mp.weixin.qq.com/s?__biz=MzI0NDE0MDgyNg==&mid=2649601985&idx=4&sn=60d500aef2f54463e33ea46053de808d&chksm=f17b49b4c60cc0a25db36e4297ec7d8d2e8beff67ce834347227e24814bc1e13bdb7ac4ba3db&scene=126&sessionid=0
版权

今天接到粉丝私信，询问是否可以通过Canvas绘制一些图形，然后根据粉丝提供的模板图，通过Canvas进行模拟绘制，通过分析发现，图形虽然相对简单，但是如果不借助相应的软件，纯代码绘制还是稍微费些时间。今天将绘制图形源码分享出来，仅供学习分享之用，如有不足之处，还请指正。

e39cbad1d529a3bbd5a67d89db7e7121.png

什么是Canvas?

Canvas表示一个图形容器（称之为画布），可以使用Javascript脚本来绘制图形。

Canvas坐标

Canvas 是一个二维网格。Canvas 的左上角坐标为 (0,0)。如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。鼠标移动的矩形框上，显示定位坐标。

756c32f3663a201b547ac65a0a438f91.png

Canvas接口

Canvas默认提供了简单图形绘制功能，如直线，矩形，圆弧，贝塞尔曲线等，通过接口可以绘制简单的图形，复杂的图形需要通过简单的图形进行不同组合来实现。

具体可参考：https://www.w3school.com.cn/jsref/dom_obj_canvas.asp

dd43dbd6a61c042367b00e7cdac31e6a.png

需求原图

首先看下粉丝发来的原图，其中红框内容的图形相对稍微有点复杂，如下所示：

631304ca0d0d0203be4b58112cd30c04.png

Canvas绘制图

通过Canvas绘制相应图形，效果如下所示：

93ad91261f46c1abdb4cbbc3b795b828.png

Canvas绘制源码

首先创建Canvas画图容器，通过canvas标签进行创建。每一个图形用一个容器进行创建，相互独立，如下所示：

<canvas id="bigHeadCanvas" width="150" height="150"></canvas>
<canvas id="circleCanvas" width="150" height="150"></canvas>
<canvas id="fishCanvas" width="150" height="150"></canvas>
<canvas id="heartCanvas" width="150" height="150"></canvas>
<canvas id="pandaCanvas" width="150" height="150"></canvas>
<canvas id="sunFlowerCanvas" width="150" height="150"></canvas>
<canvas id="fiveStarCanvas" width="150" height="150"></canvas>
<canvas id="catCanvas" width="150" height="150"></canvas>
<canvas id="foxCanvas" width="150" height="150"></canvas>
<canvas id="appleCanvas" width="150" height="150"></canvas>
<canvas id="rectCanvas" width="150" height="150"></canvas>
<canvas id="sixCanvas" width="150" height="150"></canvas>
<canvas id="diamondCanvas" width="150" height="150"></canvas>
<canvas id="circleRectCanvas" width="150" height="150"></canvas>
<canvas id="eggCanvas" width="150" height="150"></canvas>

1. 绘制大头熊

绘制大头熊，代码如下所示：

function drawBigHead(){
  var c = document.getElementById("bigHeadCanvas");
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.arc(50,50,50,Math.PI*1.85,Math.PI*1.15);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(50,50,45,Math.PI*1.35,Math.PI*1.68);
  ctx.stroke();
 
  ctx.beginPath();
  ctx.arc(17,17,15,Math.PI*0.7,Math.PI*1.8);//左耳
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(87,17,15,Math.PI*1.15,Math.PI*0.3);//右耳
  ctx.stroke();
  ctx.font="12px Airal";
  ctx.strokeText('大头熊形',30,130);
}

注意：前两句为创建Canvas上下文对象，先获取画布控件，再创建对象，然后就可以利用对象创建图形。

2. 绘制圆形

绘制圆形图案，如下所示：

function drawCircle(){
  var c = document.getElementById("circleCanvas");
  var ctx = c.getContext("2d");
 
  ctx.arc(55,55,50,Math.PI*0,Math.PI*2);
  ctx.stroke();
 
  ctx.font="12px Airal";
  ctx.strokeText('圆形',35,130);
}

3. 绘制鱼形

绘制鱼形，如下所示：

function drawFish(){
  var c = document.getElementById("fishCanvas");
  var ctx = c.getContext("2d");
  
  ctx.beginPath();
  ctx.arc(56,52,52,Math.PI*0.75,Math.PI*1.44);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(32,52,52,Math.PI*1.57,Math.PI*0.25);
  ctx.stroke();
 
  ctx.beginPath();
  ctx.arc(42,135,32,Math.PI*1.30,Math.PI*1.70);
  ctx.stroke();
 
  ctx.beginPath();
  ctx.arc(17,105,8,Math.PI*0.15,Math.PI*1.3);
  ctx.lineTo(20,88);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(67,105,8,Math.PI*0.88,Math.PI*1.75,true);
  ctx.lineTo(70,88);
  ctx.stroke();
  ctx.font="12px Airal";
  ctx.strokeText('鱼形',28,130);
}

4. 绘制心形

绘制心形图案，如下所示：

function drawHeart(){
  var c = document.getElementById("heartCanvas");
  var ctx = c.getContext("2d");
  ctx.arc(36,26,20,Math.PI*0.75,Math.PI*1.75);
  ctx.lineTo(60,25);
  ctx.lineTo(70,10);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(83,26,20,Math.PI*1.25,Math.PI*0.25);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(21,40);
  ctx.lineTo(60,90);
  ctx.lineTo(98,40);
  ctx.stroke();
  ctx.font="12px Airal";
  ctx.strokeText('心形',45,130);
}

5. 绘制大熊形

绘制大熊形，代码如下所示：

function drawPanda(){
  var c = document.getElementById("pandaCanvas");
  var ctx = c.getContext("2d");
  //上
  ctx.arc(18,15,15,Math.PI*0.75,Math.PI*1.85);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(80,15,15,Math.PI*1.13,Math.PI*0.20);
  ctx.lineTo(88,39);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(48,75,70,Math.PI*1.42,Math.PI*1.59);
  ctx.stroke();
  
  //中
  ctx.beginPath();
  ctx.arc(30,55,28,Math.PI*0.75,Math.PI*1.25);
  ctx.lineTo(6,23);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(66,55,28,Math.PI*1.78,Math.PI*0.25);
  ctx.lineTo(80,88);
  ctx.stroke();
 
  //下
  ctx.beginPath();
  ctx.arc(25,93,12,Math.PI*0.27,Math.PI*1.20);
  ctx.lineTo(10,74);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(70,93,12,Math.PI*1.83,Math.PI*0.73);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(47,135,35,Math.PI*1.35,Math.PI*1.65);
  ctx.stroke();
 
  ctx.font="12px Airal";
  ctx.strokeText('大熊形',33,130);
}

6. 绘制太阳花

绘制太阳花，代码如下所示：

function drawSunFlower(){
  var c = document.getElementById("sunFlowerCanvas");
  var ctx = c.getContext("2d");
  var startX=2;
  var startY=2;
  var radius=15;
  
  //上
  ctx.beginPath();
  ctx.arc(startX+4*radius,startY+1.5*radius,radius,Math.PI*1,Math.PI*0);
  ctx.stroke();
  //下
  ctx.beginPath();
  ctx.arc(startX+4*radius,startY+6.3*radius,radius,Math.PI*0,Math.PI*1);
  ctx.stroke();
  //左
  ctx.beginPath();
  ctx.arc(startX+1.5*radius,startY+4.0*radius,radius,Math.PI*0.4,Math.PI*1.6);
  ctx.stroke();
  //右
  ctx.beginPath();
  ctx.arc(startX+6.2*radius,startY+4*radius,radius,Math.PI*0.5,Math.PI*1.5,true);
  ctx.stroke();
  //上右
  ctx.beginPath();
  ctx.arc(startX+5.7*radius,startY+2.1*radius,radius,Math.PI*1.20,Math.PI*0.40);
  ctx.stroke();
 
  //上左
  ctx.beginPath();
  ctx.arc(startX+2.0*radius,startY+2.0*radius,radius,Math.PI*1.9,Math.PI*0.60,true);
  ctx.stroke();
 
  //下左
  ctx.beginPath();
  ctx.arc(startX+2.0*radius,startY+6.0*radius,radius,Math.PI*0,Math.PI*1.38);
  ctx.stroke();
 
  //下右
  ctx.beginPath();
  ctx.arc(startX+5.8*radius,startY+5.8*radius,radius,Math.PI*0.78,Math.PI*1.58,true);
  ctx.stroke();
 
  ctx.font="12px Airal";
  ctx.strokeText('太阳花形',35,130);
}

7. 绘制五角星

绘制五角星形，如下所示：

function drawFiveStar(){
  var c = document.getElementById("fiveStarCanvas");
  var ctx = c.getContext("2d");
  ctx.moveTo(30,20);
  ctx.beginPath();
  ctx.lineTo(50,0);//顶
  ctx.lineTo(70,20);
  ctx.lineTo(100,30);
  ctx.lineTo(85,60);
  ctx.lineTo(80,90);
  ctx.lineTo(50,80);//底
  ctx.lineTo(20,90);
  ctx.lineTo(15,60);
  ctx.lineTo(0,30);
  ctx.lineTo(30,20);
  ctx.closePath();
  ctx.stroke();
  ctx.font="12px Airal";
  ctx.strokeText('五角星',33,130);
}

8. 绘制猫咪头

绘制猫咪头形状，代码如下所示：

function drawCat(){
  var c = document.getElementById("catCanvas");
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.arc(60,75,60,Math.PI*1.42,Math.PI*1.58);//顶
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(60,55,50,Math.PI*0.64,Math.PI*1.2);//左下
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(55,55,50,Math.PI*1.82,Math.PI*0.38);//右下
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(55,140,45,Math.PI*1.35,Math.PI*1.65);//下
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(65,20,45,Math.PI*0.95,Math.PI*1.35);//左耳下
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(10,45,45,Math.PI*1.6,Math.PI*1.8);//左耳上
  ctx.stroke();
 
  ctx.beginPath();
  ctx.arc(115,60,60,Math.PI*1.25,Math.PI*1.40);//右耳上
  ctx.stroke();
 
  ctx.beginPath();
  ctx.arc(55,15,45,Math.PI*1.90,Math.PI*0.12);//右耳下
  ctx.stroke();
 
  ctx.font="12px Airal";
  ctx.strokeText('猫咪头形',33,130);
}

9. 绘制狐狸头

绘制狐狸头形状，代码如下所示：

function drawFox(){
  var c = document.getElementById("foxCanvas");
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.arc(60,75,60,Math.PI*1.45,Math.PI*1.55);//顶
  ctx.stroke();
 
  ctx.beginPath();
  ctx.arc(70,20,45,Math.PI*0.95,Math.PI*1.35);//左耳下
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(15,45,45,Math.PI*1.6,Math.PI*1.8);//左耳上
  ctx.stroke();
 
  ctx.beginPath();
  ctx.arc(110,60,60,Math.PI*1.25,Math.PI*1.40);//右耳上
  ctx.stroke();
 
  ctx.beginPath();
  ctx.arc(50,15,45,Math.PI*1.90,Math.PI*0.12);//右耳下
  ctx.stroke();
 
  ctx.beginPath();
  ctx.arc(60,50,40,Math.PI*0.4,Math.PI*0.6); //底部
  ctx.lineTo(45,80); //左脸
  ctx.lineTo(2,50);
  ctx.lineTo(26,27);
  ctx.stroke();
 
  ctx.beginPath();
  ctx.moveTo(92,30);//右脸
  ctx.lineTo(115,50);
  ctx.lineTo(75,80);
  ctx.lineTo(70,90);
  ctx.stroke();
 
  ctx.font="12px Airal";
  ctx.strokeText('狐狸头形',33,130);
}

10. 绘制苹果

绘制苹果形状，代码如下所示：

function drawApple(){
  var c = document.getElementById("appleCanvas");
  var ctx = c.getContext("2d");
 
  var img = new Image();
  img.width=100;
  img.height=100;
  img.src="apple.png";
  var id=setTimeout(function(){
    //console.log("超时执行");
    if(img.complete){
      ctx.drawImage(img, 10, 10,100,100);
      clearTimeout(id);
    }
  },100);
  
  ctx.font="12px Airal";
  ctx.strokeText('苹果形',35,130);
}

注意，Canvas不仅可以绘制图形，也可以添加图像元素。由于苹果图形相对复杂，所以采用绘制Image对象的方式进行绘制。

11. 绘制矩形

绘制矩形，代码如下所示：

function drawRect(){
    var c = document.getElementById("rectCanvas");
    var ctx = c.getContext("2d");
 
    ctx.rect(10,10,100,80);
    ctx.stroke();
 
    ctx.font="12px Airal";
    ctx.strokeText('圆形',35,130);
}

12. 绘制六边形

绘制六边形，如下所示：

function drawSix(){
    var c = document.getElementById("sixCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    var centerX=50;
    var centerY=50;
    var radius=50;
    ctx.moveTo(centerX+radius*Math.cos(Math.PI*0),centerY+radius*Math.sin(Math.PI*0));
    for(var i=0;i<5;i++){
        ctx.lineTo(centerX+radius*Math.cos(Math.PI*(i+1)*(1/3)),centerY+radius*Math.sin(Math.PI*(i+1)*(1/3)));
    }
    ctx.closePath();
    ctx.stroke();
 
    ctx.font="12px Airal";
    ctx.strokeText('六边形',35,130);
}

注意：六边形相当于将圆进行六平分，取六个顶点进行连线，所以此处采用for循环进行绘制。

13. 绘制钻石

绘制钻石形，如下所示：

function drawDiamond(){
    var c = document.getElementById("diamondCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(20,5);
    ctx.lineTo(90,5);
    ctx.lineTo(110,35);
    ctx.lineTo(55,100);
    ctx.lineTo(0,35);
    ctx.closePath();
    ctx.stroke();
    ctx.font="12px Airal";
    ctx.strokeText('钻石形',33,130);
 
}

14. 绘制侧角长条形

绘制侧角长条形，代码如下所示：

function drawCircleRect(){
    var c = document.getElementById("circleRectCanvas");
    var ctx = c.getContext("2d");
    var centerX=20;
    var centerY=5;
    ctx.beginPath();
    ctx.moveTo(centerX+ 15,centerY+ 5);
    ctx.lineTo(centerX+60,centerY+ 5);
    ctx.lineTo(centerX+60,centerY+ 80);
    ctx.arc(centerX+50,centerY+ 80,10,Math.PI*0,Math.PI*0.5);
    ctx.lineTo(centerX+5,centerY+ 90);
    ctx.lineTo(centerX+5,centerY+ 15)
    ctx.arc(centerX+15,centerY+ 15,10,Math.PI*1,Math.PI*1.5);
    ctx.closePath();
    ctx.stroke();
    ctx.font="12px Airal";
    ctx.strokeText('侧角长条形',30,130);
}

15. 绘制鸡蛋

绘制鸡蛋形，如下所示：

function drawEgg(){
    var c = document.getElementById("eggCanvas");
    var ctx = c.getContext("2d");
 
    ctx.rotate(10*Math.PI/180);
    var centerX=40;
    var centerY=2;
    ctx.beginPath();
    ctx.arc(centerX+30,centerY+ 60,30,Math.PI*0,Math.PI*1);
    ctx.lineTo(centerX+15,centerY+ 25);
    ctx.arc(centerX+35,centerY+ 25,20,Math.PI*1,Math.PI*0);
    ctx.lineTo(centerX+60,centerY+ 60);
    ctx.closePath();
    ctx.stroke();
    ctx.rotate(-10*Math.PI/180);
    ctx.font="12px Airal";
    ctx.strokeText('鸡蛋形',30,130);
}

注意：因为鸡蛋形有点倾斜，所以绘制的时候进行了旋转。

以上就是Html中利用Canvas进行绘制图形的全部内容。

  • -

  • 技术群：添加小编微信并备注进群

    小编微信：mm1552923   

    公众号：dotNet编程大全    

zls365365
关注
HTML5画布(canvas)绘制图形
m0_61843988的博客
07-15 4542
canvas 元素用于在网页上绘制图形 canvas 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形。 默认情况下它在网页上是一块空白区域，默认大小300*150 注意：canvas画布默认背景色为透明色，可以自行定义背景色...
使用HTML中的canvas绘制图形
Jimmy Huang's Blog
03-07 828
*以下为笔记 一、什么是canvas HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器，您必须使用脚本来绘制图形。 你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。 二、如何使用canvas 1、建立一个canvas实例 <canvas id="m...
HTML5中canvas绘图基础详解
最新发布
业精于勤荒于嬉，行成于思毁于随
09-08 1792
H5中新增了重要元素canvas,通过绘制任意图形，借助自带API，通过编写js可以控制各种图形，制作动画效果，对web具有划时代意义。
HTML5 Canvas绘图
It_sharp的博客
01-14 712
Canvas标签 HTML5 标签用作绘图的容器，使用JS脚本来完成绘图。 如下代码可以获取绘制上下文，类似于C#中的Graphics g = e.Graphics获取画布 var c = document.getElementById(&amp;amp;quot;Canvas&amp;amp;quot;); var ctx = c.getContext(&amp;amp;quot;2d&amp;amp;quot;); 绘制的对象有文本、线条、矩形、圆形等
【HTML】【一文全解Canvas】从初学到实战，彻底掌握前端绘图神器！
热门推荐
weixin_55846296的博客
06-09 1万+
前言一、Canvas 概述二、在 HTML 中使用 Canvas三、Canvas 绘制图形1、绘制矩形2、绘制圆形a. 绘制实心圆形b. 绘制空心圆形四、Canvas 绘制文本五、Canvas 绘制图片六、Canvas 动画效果1、setInterval() 实现动画2、requestAnimationFrame() 实现动画七、Canvas 使用注意事项八、利用Canvas绘制挂钟（原理-绘制弧形）- 简单练习1、 还原坐标系2、 绘制背景3、 绘制时钟指针4、循环绘制。
HTML 的canvas画图
qq_27009517的博客
07-21 168
HTML5和css3的权威指南 <!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"> <ti
HTML5 Canvas绘制图形从入门到精通
qq_58626489的博客
02-26 1687
canvas> 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。 标记和 SVG以及 VML 之间的一个重要的不同是， 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。Mozilla 程序从 Gecko 1.8 (Firefox 1.5) 开始支持, Internet Explorer 从 IE9 开始。Chrome 和 Opera 9+ 也支持。
vue+canvas绘制图形
01-09
总之，"vue+canvas绘制图形"项目展示了如何利用Vue的组件化思想和Canvas的绘图能力，创建出具有动态效果和用户交互的前端应用。通过学习和实践这种方式，开发者可以提高自己的前端技能，为网页带来更丰富的视觉体验...
html5 canvas绘制几何图形动画特效
11-08
以下是对HTML5 Canvas绘制几何图形动画特效的详细讲解。 1. **Canvas API基础** HTML5 Canvas是一个基于矢量图形的画布，通过JavaScript进行编程操作。它提供了`<canvas>`标签，该标签在页面上创建一个矩形区域，...
html5 canvas 模拟Windows 画图程序.rar
07-10
html5 canvas 模拟Windows 画图程序，初看上去，你会不会觉得这就是windows 的画图程序呢？界面和功能布局几乎是一样的，而且用起来也和Windows画图没啥区别，真心模拟的很像。运用Canvas技术来实现的画图程序。
html5 canvas实现绘图板
05-12
html5 canvas绘图板，实现了如下功能： 1、调色（只有固定的几种颜色）、 2、改变笔触粗细、 3、撤销、 4、保存图片到本地、 5、改变画布颜色
HTML5 canvas自由绘制图形工具特效代码
03-20
这个"HTML5 canvas自由绘制图形工具特效代码"是利用canvas元素实现的一个交互式画板应用，用户可以自由地在画板上绘制各种形状，同时支持图形的拖拽操作，极大地提升了用户体验。 首先，canvas的基本使用方法包括...
探索HTML Canvas：创意绘图与网页美化（秒懂网页Canvas绘图）
百赢出品，必属精品
04-08 1841
canvas> 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。Canvas是HTML5提供的一个元素，用于通过JavaScript绘制图形。绘制图形：Canvas可以绘制各种形状、线条、文本和图像，使开发者能够灵活地创建图形效果。动态更新：Canvas提供了API，开发者可以通过JavaScript动态更新画布上的图形，实现实时的数据可视化和动画效果。高性能。
在html上用画布画画,HTML5里Canvas常用的绘图技巧
weixin_29724477的博客
06-18 451
在H5里我们会常用到canvas这个元素来绘制图形。那么我们今天就来介绍一下canvas怎么使用，canvas在哪些情形下可以使用。以及canvas的绘画技巧canvas 用于在页面上 绘制图形canvas概述：html5 canvas元素和javascript配合使用在页面上绘制图形canvas是一个画布，在画布上绘制 路径 矩形 圆形…canvas绘制图形： ---》javascript绘制C...
HTML5 Canvas
qq_35892775的博客
10-13 192
&lt;canvas&gt; 标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。 在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。 什么是 canvas? HTML5 &lt;canvas&gt; 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成. &lt;canvas&gt; 标签只是图形容器，您必须使用脚本来绘制图形。 你...
Canvas学习记录
小康博客
09-14 463
Canvas的基本用法 canvas元素 <canvas id="tutorial" width="150" height="150"></canvas> canvas元素与img元素相似，但其没有src属性和alt属性。其只有两个属性width（默认值300像素）和height（默认值150像素）。如果没有为其设置宽度和高度时，那么将初始化为默认大小。 该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。
html5<canvas>画图
xu_ya_fei的专栏
06-02 2801
html5<canvas>画图
HTML5 Canvas基础教程：利用JavaScript绘制图形与动画
HTML5 Canvas 是一种强大的HTML5技术，用于在网页上使用JavaScript动态绘制图形、图像和动画。Canvas 元素是一个全新的HTML元素，其结构与类似，但不包含src和alt属性，因为它的主要目的是通过编程创建视觉内容，而...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值