首页 > 其他分享 >Html利用Canvas绘制图形

Html利用Canvas绘制图形

时间：2023-07-16 19:44:14浏览次数：32  
标签：Canvas beginPath arc ctx stroke Html PI 绘制 Math

今天接到粉丝私信，询问是否可以通过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标签进行创建。每一个图形用一个容器进行创建，相互独立，如下所示：

<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进行绘制图形的全部内容。

标签：Canvas,beginPath,arc,ctx,stroke,Html,PI,绘制,Math
From： https://www.cnblogs.com/hsiang/p/17557950.html

相关文章

  • php做的中秋博饼游戏之绘制骰子图案功能示例
    先看代码header('Content-Type:image/png');$img=imagecreatetruecolor(200,200);$white=imagecolorallocate($img,255,255,255);$grey=imagecolorallocate($img,100,100,100);$blue=imagecolorallocate($img,0,102,255);$red=imagecolorallocat......
  • HTML5 Canvas API制作一个简单的猜字单机游戏
    这篇文章主要介绍了借助HTML5CanvasAPI制作一个简单的猜字单机游戏的实例分享,游戏中每局会自动生成一个字母,玩家按键盘来猜测该字母是哪一个,需要的朋友可以参考下HTML代码<!doctypehtml><htmllang="en"><head><metacharset="utf-8"/><scrip......
  • HTML5的Video标签的属性,方法和事件汇总
    HTML5的Video标签的属性,方法和事件汇总 常用屬性與方法:获取视频元素：varvideoElement=document.getElementById("videoPlay");获取设置音量大小：videoElement.volume获取设置当前播放的位置：videoElement.currentTime播放视频：videoElement.play()暂停视频：videoElement.p......
  • 后端编程开发 --- html 学习路线
    1.基础。htmlcssjavascriptdom2.中级。数据格式定义（json、xml）、restfulapi（jqueryajax、fetchapi、reactivex）、可用性、正则、html语义化、命令行、nodejs、div/css，scss/sass、svg、spa3.高级。es6、typescript、css3、面向对象编程、函数式编程、mvc、mvvm、跨域、http基......
  • html-two
    <!--1过2过3过4过5过-------------------1过2过3过4过5过-----------------------------1过2过3过4过5过------------------------------><!DOCTYPEhtml><htmllang="en"><head>  <metacharset="UTF-......
  • python通过Websocket与html主动通讯
    python通过Websocket与html主动通讯导语：在Web开发中，实现实时通信是一项常见的需求。本文将介绍如何使用Python和WebSocket技术实现与HTML页面的实时通信，以显示当前的实时时间。1.WebSocket简介WebSocket是一种全双工通信协议，允许在客户端和服务器之间建立持久连接，实现实时数据......
  • HTML标签
    #标签分类行内标签：span标签、a标签、b标签、i标签、sub标签、sup标签、em标签、strong标签快标签：div标签、p标签、h1标签、h2标签、h3标签、h4标签、h5标签、h6标签、ul标签、li标签、ol标签、section标签、aside标签、header标签、footer标签、header标签行内块......
  • ner7下的html导出为pdf
    ner7下的html导出为pdfnuget引入dinktopdf，按github上的示例来弄即可：https://github.com/rdvojmoc/DinkToPdf/mac下vs2022，net7测试，需要把https://github.com/rdvojmoc/DinkToPdf/blob/master/v0.12.4/64%20bit/下的几个文件都下载下来复制到bin/debug/net7.0目录下 [Http......
  • html2canvas + jspdf 实现前端将页面内容生成 PDF
    一、简易步骤（仅支持下载一页，无法分页）1.下载插件模块npminstallhtml2canvasjspdf--save2.编写代码importhtml2canvasfrom'html2canvas'//引入插件import{jsPDF}from'jspdf'//html2canvsjspdfpdf文件下载exportconstdownloadPdf=(dom,name......
  • 20个非常绚丽的HTML5/CSS3应用插件
    基于HTML5的应用现在已经非常广泛，今天我们就来向大家分享20款非常绚丽的HTML5/CSS3应用插件。希望大家喜欢并分享给你的好友们。1、HTML5视频破碎重组特效强大视觉冲击HTML5视频播放器很多，但是HTML5视频特效还是很少见的，这款HTML5视频破碎重组特效非常刺激，给人强大的视觉冲击。......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99