发帖
翼度科技»论坛 › 编程开发 › html5 › 查看内容

Html利用Canvas绘制图形

小僧渡红尘

6

主题

6

帖子

18

积分

新手上路

Rank: 1

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

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

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

 
Canvas接口

 
Canvas默认提供了简单图形绘制功能，如直线，矩形，圆弧，贝塞尔曲线等，通过接口可以绘制简单的图形，复杂的图形需要通过简单的图形进行不同组合来实现。
具体可参考：https://www.w3school.com.cn/jsref/dom_obj_canvas.asp

 
需求原图

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

 
Canvas绘制图

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

 
Canvas绘制源码

 
首先创建Canvas画图容器，通过canvas标签进行创建。每一个图形用一个容器进行创建，相互独立，如下所示：
  1. [/code] 
  2. [size=5][b]1. 绘制大头熊[/b][/size]
  4.  
  5. 绘制大头熊，代码如下所示：
  6. [code]function drawBigHead(){
  7.         var c = document.getElementById("bigHeadCanvas");
  8.         var ctx = c.getContext("2d");
  9.         ctx.beginPath();
  10.         ctx.arc(50,50,50,Math.PI*1.85,Math.PI*1.15);
  11.         ctx.stroke();
  12.         ctx.beginPath();
  13.         ctx.arc(50,50,45,Math.PI*1.35,Math.PI*1.68);
  14.         ctx.stroke();
  16.         ctx.beginPath();
  17.         ctx.arc(17,17,15,Math.PI*0.7,Math.PI*1.8);//左耳
  18.         ctx.stroke();
  19.         ctx.beginPath();
  20.         ctx.arc(87,17,15,Math.PI*1.15,Math.PI*0.3);//右耳
  21.         ctx.stroke();
  22.         ctx.font="12px Airal";
  23.         ctx.strokeText('大头熊形',30,130);
  24. }
复制代码
注意：前两句为创建Canvas上下文对象，先获取画布控件，再创建对象，然后就可以利用对象创建图形。
 
2. 绘制圆形

 
绘制圆形图案，如下所示：
  1. function drawCircle(){
  2.         var c = document.getElementById("circleCanvas");
  3.         var ctx = c.getContext("2d");
  5.         ctx.arc(55,55,50,Math.PI*0,Math.PI*2);
  6.         ctx.stroke();
  8.         ctx.font="12px Airal";
  9.         ctx.strokeText('圆形',35,130);
  10. }
复制代码
 
3. 绘制鱼形

 
绘制鱼形，如下所示：
  1. function drawFish(){
  2.         var c = document.getElementById("fishCanvas");
  3.         var ctx = c.getContext("2d");
  4.        
  5.         ctx.beginPath();
  6.         ctx.arc(56,52,52,Math.PI*0.75,Math.PI*1.44);
  7.         ctx.stroke();
  8.         ctx.beginPath();
  9.         ctx.arc(32,52,52,Math.PI*1.57,Math.PI*0.25);
  10.         ctx.stroke();
  12.         ctx.beginPath();
  13.         ctx.arc(42,135,32,Math.PI*1.30,Math.PI*1.70);
  14.         ctx.stroke();
  16.         ctx.beginPath();
  17.         ctx.arc(17,105,8,Math.PI*0.15,Math.PI*1.3);
  18.         ctx.lineTo(20,88);
  19.         ctx.stroke();
  20.         ctx.beginPath();
  21.         ctx.arc(67,105,8,Math.PI*0.88,Math.PI*1.75,true);
  22.         ctx.lineTo(70,88);
  23.         ctx.stroke();
  24.         ctx.font="12px Airal";
  25.         ctx.strokeText('鱼形',28,130);
  26. }
复制代码
 
4. 绘制心形

 
绘制心形图案，如下所示：
  1. function drawHeart(){
  2.         var c = document.getElementById("heartCanvas");
  3.         var ctx = c.getContext("2d");
  4.         ctx.arc(36,26,20,Math.PI*0.75,Math.PI*1.75);
  5.         ctx.lineTo(60,25);
  6.         ctx.lineTo(70,10);
  7.         ctx.stroke();
  8.         ctx.beginPath();
  9.         ctx.arc(83,26,20,Math.PI*1.25,Math.PI*0.25);
  10.         ctx.stroke();
  11.         ctx.beginPath();
  12.         ctx.moveTo(21,40);
  13.         ctx.lineTo(60,90);
  14.         ctx.lineTo(98,40);
  15.         ctx.stroke();
  16.         ctx.font="12px Airal";
  17.         ctx.strokeText('心形',45,130);
  18. }
复制代码
 
5. 绘制大熊形

 
绘制大熊形，代码如下所示：
  1. function drawPanda(){
  2.         var c = document.getElementById("pandaCanvas");
  3.         var ctx = c.getContext("2d");
  4.         //上
  5.         ctx.arc(18,15,15,Math.PI*0.75,Math.PI*1.85);
  6.         ctx.stroke();
  7.         ctx.beginPath();
  8.         ctx.arc(80,15,15,Math.PI*1.13,Math.PI*0.20);
  9.         ctx.lineTo(88,39);
  10.         ctx.stroke();
  11.         ctx.beginPath();
  12.         ctx.arc(48,75,70,Math.PI*1.42,Math.PI*1.59);
  13.         ctx.stroke();
  14.        
  15.         //中
  16.         ctx.beginPath();
  17.         ctx.arc(30,55,28,Math.PI*0.75,Math.PI*1.25);
  18.         ctx.lineTo(6,23);
  19.         ctx.stroke();
  20.         ctx.beginPath();
  21.         ctx.arc(66,55,28,Math.PI*1.78,Math.PI*0.25);
  22.         ctx.lineTo(80,88);
  23.         ctx.stroke();
  25.         //下
  26.         ctx.beginPath();
  27.         ctx.arc(25,93,12,Math.PI*0.27,Math.PI*1.20);
  28.         ctx.lineTo(10,74);
  29.         ctx.stroke();
  30.         ctx.beginPath();
  31.         ctx.arc(70,93,12,Math.PI*1.83,Math.PI*0.73);
  32.         ctx.stroke();
  33.         ctx.beginPath();
  34.         ctx.arc(47,135,35,Math.PI*1.35,Math.PI*1.65);
  35.         ctx.stroke();
  37.         ctx.font="12px Airal";
  38.         ctx.strokeText('大熊形',33,130);
  39. }
复制代码
 
6. 绘制太阳花

 
绘制太阳花，代码如下所示：
  1. function drawSunFlower(){
  2.         var c = document.getElementById("sunFlowerCanvas");
  3.         var ctx = c.getContext("2d");
  4.         var startX=2;
  5.         var startY=2;
  6.         var radius=15;
  7.        
  8.         //上
  9.         ctx.beginPath();
  10.         ctx.arc(startX+4*radius,startY+1.5*radius,radius,Math.PI*1,Math.PI*0);
  11.         ctx.stroke();
  12.         //下
  13.         ctx.beginPath();
  14.         ctx.arc(startX+4*radius,startY+6.3*radius,radius,Math.PI*0,Math.PI*1);
  15.         ctx.stroke();
  16.         //左
  17.         ctx.beginPath();
  18.         ctx.arc(startX+1.5*radius,startY+4.0*radius,radius,Math.PI*0.4,Math.PI*1.6);
  19.         ctx.stroke();
  20.         //右
  21.         ctx.beginPath();
  22.         ctx.arc(startX+6.2*radius,startY+4*radius,radius,Math.PI*0.5,Math.PI*1.5,true);
  23.         ctx.stroke();
  24.         //上右
  25.         ctx.beginPath();
  26.         ctx.arc(startX+5.7*radius,startY+2.1*radius,radius,Math.PI*1.20,Math.PI*0.40);
  27.         ctx.stroke();
  29.         //上左
  30.         ctx.beginPath();
  31.         ctx.arc(startX+2.0*radius,startY+2.0*radius,radius,Math.PI*1.9,Math.PI*0.60,true);
  32.         ctx.stroke();
  34.         //下左
  35.         ctx.beginPath();
  36.         ctx.arc(startX+2.0*radius,startY+6.0*radius,radius,Math.PI*0,Math.PI*1.38);
  37.         ctx.stroke();
  39.         //下右
  40.         ctx.beginPath();
  41.         ctx.arc(startX+5.8*radius,startY+5.8*radius,radius,Math.PI*0.78,Math.PI*1.58,true);
  42.         ctx.stroke();
  44.         ctx.font="12px Airal";
  45.         ctx.strokeText('太阳花形',35,130);
  46. }
复制代码
 
7. 绘制五角星

 
绘制五角星形，如下所示：
  1. function drawFiveStar(){
  2.         var c = document.getElementById("fiveStarCanvas");
  3.         var ctx = c.getContext("2d");
  4.         ctx.moveTo(30,20);
  5.         ctx.beginPath();
  6.         ctx.lineTo(50,0);//顶
  7.         ctx.lineTo(70,20);
  8.         ctx.lineTo(100,30);
  9.         ctx.lineTo(85,60);
  10.         ctx.lineTo(80,90);
  11.         ctx.lineTo(50,80);//底
  12.         ctx.lineTo(20,90);
  13.         ctx.lineTo(15,60);
  14.         ctx.lineTo(0,30);
  15.         ctx.lineTo(30,20);
  16.         ctx.closePath();
  17.         ctx.stroke();
  18.         ctx.font="12px Airal";
  19.         ctx.strokeText('五角星',33,130);
  20. }
复制代码
 
8. 绘制猫咪头

 
绘制猫咪头形状，代码如下所示：
  1. function drawCat(){
  2.         var c = document.getElementById("catCanvas");
  3.         var ctx = c.getContext("2d");
  4.         ctx.beginPath();
  5.         ctx.arc(60,75,60,Math.PI*1.42,Math.PI*1.58);//顶
  6.         ctx.stroke();
  7.         ctx.beginPath();
  8.         ctx.arc(60,55,50,Math.PI*0.64,Math.PI*1.2);//左下
  9.         ctx.stroke();
  10.         ctx.beginPath();
  11.         ctx.arc(55,55,50,Math.PI*1.82,Math.PI*0.38);//右下
  12.         ctx.stroke();
  13.         ctx.beginPath();
  14.         ctx.arc(55,140,45,Math.PI*1.35,Math.PI*1.65);//下
  15.         ctx.stroke();
  16.         ctx.beginPath();
  17.         ctx.arc(65,20,45,Math.PI*0.95,Math.PI*1.35);//左耳下
  18.         ctx.stroke();
  19.         ctx.beginPath();
  20.         ctx.arc(10,45,45,Math.PI*1.6,Math.PI*1.8);//左耳上
  21.         ctx.stroke();
  23.         ctx.beginPath();
  24.         ctx.arc(115,60,60,Math.PI*1.25,Math.PI*1.40);//右耳上
  25.         ctx.stroke();
  27.         ctx.beginPath();
  28.         ctx.arc(55,15,45,Math.PI*1.90,Math.PI*0.12);//右耳下
  29.         ctx.stroke();
  31.         ctx.font="12px Airal";
  32.         ctx.strokeText('猫咪头形',33,130);
  33. }
复制代码
 
9. 绘制狐狸头

 
绘制狐狸头形状，代码如下所示：
  1. function drawFox(){
  2.         var c = document.getElementById("foxCanvas");
  3.         var ctx = c.getContext("2d");
  4.         ctx.beginPath();
  5.         ctx.arc(60,75,60,Math.PI*1.45,Math.PI*1.55);//顶
  6.         ctx.stroke();
  8.         ctx.beginPath();
  9.         ctx.arc(70,20,45,Math.PI*0.95,Math.PI*1.35);//左耳下
  10.         ctx.stroke();
  11.         ctx.beginPath();
  12.         ctx.arc(15,45,45,Math.PI*1.6,Math.PI*1.8);//左耳上
  13.         ctx.stroke();
  15.         ctx.beginPath();
  16.         ctx.arc(110,60,60,Math.PI*1.25,Math.PI*1.40);//右耳上
  17.         ctx.stroke();
  19.         ctx.beginPath();
  20.         ctx.arc(50,15,45,Math.PI*1.90,Math.PI*0.12);//右耳下
  21.         ctx.stroke();
  23.         ctx.beginPath();
  24.         ctx.arc(60,50,40,Math.PI*0.4,Math.PI*0.6); //底部
  25.         ctx.lineTo(45,80); //左脸
  26.         ctx.lineTo(2,50);
  27.         ctx.lineTo(26,27);
  28.         ctx.stroke();
  30.         ctx.beginPath();
  31.         ctx.moveTo(92,30);//右脸
  32.         ctx.lineTo(115,50);
  33.         ctx.lineTo(75,80);
  34.         ctx.lineTo(70,90);
  35.         ctx.stroke();
  37.         ctx.font="12px Airal";
  38.         ctx.strokeText('狐狸头形',33,130);
  39. }
复制代码
 
10. 绘制苹果

 
绘制苹果形状，代码如下所示：
  1. function drawApple(){
  2.         var c = document.getElementById("appleCanvas");
  3.         var ctx = c.getContext("2d");
  5.         var img = new Image();
  6.         img.width=100;
  7.         img.height=100;
  8.         img.src="apple.png";
  9.         var id=setTimeout(function(){
  10.                 //console.log("超时执行");
  11.                 if(img.complete){
  12.                         ctx.drawImage(img, 10, 10,100,100);
  13.                         clearTimeout(id);
  14.                 }
  15.         },100);
  16.        
  17.         ctx.font="12px Airal";
  18.         ctx.strokeText('苹果形',35,130);
  19. }
复制代码
注意，Canvas不仅可以绘制图形，也可以添加图像元素。由于苹果图形相对复杂，所以采用绘制Image对象的方式进行绘制。
 
11. 绘制矩形

 
绘制矩形，代码如下所示：
  1. function drawRect(){
  2.     var c = document.getElementById("rectCanvas");
  3.     var ctx = c.getContext("2d");
  5.     ctx.rect(10,10,100,80);
  6.     ctx.stroke();
  8.     ctx.font="12px Airal";
  9.     ctx.strokeText('矩形',35,130);
  10. }
复制代码
 
12. 绘制六边形

 
绘制六边形，如下所示：
[code]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

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x

上一篇: Flutter系列文章-Flutter环境搭建和Dart基础

下一篇: Html利用Canvas绘制图形

发表于 2023-7-17 13:05:50

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4