Html利用Canvas绘制图形

这篇具有很好参考价值的文章主要介绍了Html利用Canvas绘制图形。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

 

什么是Canvas?

 

Canvas表示一个图形容器(称之为画布),可以使用脚本来绘制图形。

 

Canvas坐标

 

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

Html利用Canvas绘制图形

 

Canvas接口

 

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

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

Html利用Canvas绘制图形

 

需求原图

 

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

Html利用Canvas绘制图形

 

Canvas绘制图

 

通过Canvas绘制相应图形,效果如下所示:

Html利用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进行绘制图形的全部内容。文章来源地址https://www.toymoban.com/news/detail-569505.html

到了这里,关于Html利用Canvas绘制图形的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Java AWT 图形界面编程】使用鼠标滚轮缩放 Canvas 画布中绘制的背景图像 ( 绘制超大图像 + 鼠标拖动 + 鼠标滚轮缩放 + 以当前鼠标指针位置为缩放中心 示例 )

    鼠标指针指向界面中的 Canvas 画布某个位置 , Canvas 画布中绘制着一张超大图片 , 以该位置为中心 , 滑动鼠标滚轮时进行缩放 ; 使用鼠标滚轮缩放后 , 在 Canvas 中绘制的图片的尺寸肯定是放大或者缩小了 , 尺寸发生了改变 ; 图片缩放时 , 鼠标指针指向一个位置 , 该位置对应着一

    2024年02月15日
    浏览(79)
  • LeaferUI - 性能强悍、简洁轻量的 HTML5 Canvas 2D 图形 UI 绘图框架,用于 web 端在线图形设计、图表、白板、数据可视化等场景

    最近想做一个轻巧的在线画册和海报设计工具,最近发布的 LeaferUI 特别适合这样的场景。 LeaferUI 是什么? Leafer UI 是基于 LeaferJS 开发的一套绚丽多彩的 UI 绘图框架,帮助开发者快速生成图形界面。LeaferJS 是一个基于 HTML5 Canvas 开发的 2D 绘图渲染引擎,在 web 上绘图性能非

    2024年02月13日
    浏览(65)
  • 计算机图形学实验——利用MFC对话框实现多边形绘制与填充(扫描线填充算法)附源码

    内容概括: 利用基于对话框的MFC项目 实现鼠标点击绘制多边形 实现扫描线算法填充多边形 源码见Yushan-Ji/ComputerGraphics: ECNU2023秋 计算机图形学课程实验代码 (github.com) 通过鼠标交互输入多边形 对各种多边形进行填充,包括边界自交的情况 利用 OnLButtonDown 和 OnRButtonDown 函数,

    2024年02月04日
    浏览(70)
  • 微信小程序canvas绘制自适应图片,UniApp canvas绘制自适应图片

     需求:画布宽高为686 * 686 的正方形(可以进行调整根据自身需要来)             当图片宽度大于高度时,对图片宽度进行裁剪              当图片高度大于宽度时,对图片高度进行裁剪              我是用uniApp进行开发的,如果是小程序原生,直接把“uni” 改为 “

    2024年02月09日
    浏览(60)
  • 学习Canvas基础-绘制矩形

    学习Canvas基础-绘制矩形 canvas提供了三个API,分别是: 1.绘制矩形 rect(起点X, 起点Y, 绘制的矩形width, 绘制的矩形height) 但该方法不会出实际效果,需要配合 fill()和stroke()方法让其显现。 2.绘制一个填充的矩形 fillRect(起点X, 起点Y, 绘制的矩形width, 绘制的矩形height) 3.绘制一

    2023年04月09日
    浏览(56)
  • 小程序 canvas 绘制图片

    绘制图片的问题 1、canvas不能绘制网络图片需要转换成本地图片进行使用 2、多张图片绘制需要调用 img.onload,进行嵌套绘制 html

    2024年02月14日
    浏览(38)
  • canvas绘制直角梯形(向右)

    查看专栏目录 canvas示例教程100+专栏,提供canvas的基础知识,高级动画,相关应用扩展等信息。canvas作为html的一部分,是图像图标地图可视化的一个重要的基础,学好了canvas,在其他的一些应用上将会起到非常重要的帮助。 如何使用canvas绘制直角梯形呢?方法其实很简单,先

    2024年01月17日
    浏览(56)
  • canvas绘制直角梯形(向左)

    查看专栏目录 canvas示例教程100+专栏,提供canvas的基础知识,高级动画,相关应用扩展等信息。canvas作为html的一部分,是图像图标地图可视化的一个重要的基础,学好了canvas,在其他的一些应用上将会起到非常重要的帮助。 如何使用canvas绘制直角梯形呢?方法其实很简单,先

    2024年01月16日
    浏览(58)
  • Flutter 绘制番外 | 将你的 Canvas 绘制保存为图片

    前言 光阴似箭,《Flutter 绘制指南 - 妙笔生花》 转眼间已经发布两年半了,不知道各位练习得怎么样。有不少朋友问过如何将 Canvas 绘制的内容保存为图片,最近在做的东西刚好涉及了这块,通过本文来分享一下。 提到保存图片,很多人可能会想到 RepaintBoundary , 但它使用起

    2024年02月05日
    浏览(40)
  • canvas绘制美队盾牌

    查看专栏目录 canvas示例教程100+专栏,提供canvas的基础知识,高级动画,相关应用扩展等信息。canvas作为html的一部分,是图像图标地图可视化的一个重要的基础,学好了canvas,在其他的一些应用上将会起到非常重要的帮助。 怎样使用canvas绘制美队盾牌呢?这里面要绘制四个不

    2024年01月18日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包