H5_Node4_Canvas1-基本路径&简单图形&文字&图形阴影 绘制

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

#html5 #canvas

本文介绍Canvas的基本使用方法，包括创建画布、绘制路径、图形、文字及阴影效果，并通过实例展示了碰撞反弹和拖拽画画的功能。
-->Canvas的基础知识
-->基本路径的绘制
-->绘制简单图形
-->文字的绘制
-->图形的阴影



一、Canvas的基础知识

<canvas>标签的基本结构如下：
<canvas id="myCanvas" width="200" height="200">< /canvas>
canvas元素自身有两个属性：width和height，除此之外，canvas还拥有所有主要的HTML5属性，
比如说class、id和 name等。id属性被用在上面所示的代码中，JavaScript使用这里创建的canvas的id来表示要在上面绘画的画布。
JavaScript使用document.getElementById()方法来确定正确的画布，如下面代码所示：
var cvs = document.getElementById("myCanvas");

IE 6 7 8不支持 <canvas>标签

每个画布都必须要有一个context（上下文）的定义，
如下面代码所示。就目前的情况来说，官方规范只承认一个2D环境：
var ctx = cvs.getContext("2d");
在标识画布并指明了它的上下文之后，就可以开始绘画了
  

二、基本路径的绘制

ctx.beginPath() ：开始一个路径
ctx.moveTo(x,y)： 路径移到画布中的指定点 , 即起点
ctx.lineTo(x,y) ：添加一个新点，画线
......
ctx.closePath() ：关闭绘制路径
ctx.fillStyle：用来设置填充颜色
ctx.fill() ：填充已定义好的路径
ctx.lineWidth：画线的宽度
ctx.strokeStyle：用来设置描边颜色
ctx.stroke() ：绘制已定义好的路径


三、绘制简单图形

1、矩形的绘制

rect(x,y,w,h)：

x、y为起始坐标，w、h为矩形的宽、高

支持这么写：

ctx.fillRect(x,y,w,h) 

ctx.strokeRect(x,y,w,h)



2、圆形的绘制
arc(x,y,r,sa,ea,true/false)：
x、y为圆心坐标，r为半径，
sa、ea分别为起始角度和结束角度，
true是逆时针画圆，false是顺时针画圆；
360度角即2PI弧度，1度就是2PI/360=PI/180弧度，
90度就是2PI/360*90=PI/2弧度(其他的角度自行计算)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas-绘图流程</title>
<style>
*{margin:0;padding:0;list-style: none;}
#myCanvas{
	margin:20px auto 0;
	background: #eee;
	border:1px solid #666;
}
</style>
</head>
<body>
	<canvas id="myCanvas"width="800" height="800">亲，别再用古董浏览器了
	！</canvas>
</body>
<script>
/*绘制图形-流程*/
	//绘制三角形--填充颜色
	var cvs=document.getElementById('myCanvas');//画纸
	var ctx=cvs.getContext('2d');//画笔
	ctx.beginPath();//开始一个路径
	ctx.moveTo(50,50);//起点
	ctx.lineTo(350,50);//添加一个新点-画线
	ctx.lineTo(200,200);//路径点
	// ctx.lineTo(50,50);
	ctx.closePath();//关闭绘制路径--自动闭合终点和起点
	ctx.fillStyle='green';//设置填充颜色
	ctx.fill();//填充已定义好的路径
	//绘制三角形--边框
	ctx.beginPath();//开始一个路径
	ctx.moveTo(400,50);//起点
	ctx.lineTo(700,50);//添加一个新点-画线
	ctx.lineTo(550,200);//路径点
	// ctx.lineTo(50,50);
	ctx.closePath();//关闭绘制路径--自动闭合终点和起点
	ctx.lineWidth=4;//绘制线宽4px
	ctx.strokeStyle='red'//设置描边颜色
	ctx.stroke();//绘制已定义好的路径


	//绘制一个矩形
	ctx.beginPath();//开始一个路径
	ctx.moveTo(50,250);//起点
	ctx.lineTo(350,250);//添加一个新点-画线
	ctx.lineTo(350,400);//路径点
	ctx.lineTo(50,400);//路径点
	// ctx.lineTo(50,50);
	ctx.closePath();//关闭绘制路径--自动闭合终点和起点
	ctx.fillStyle='red';//设置填充颜色
	ctx.fill();//填充已定义好的路径
	ctx.lineWidth=4;//绘制线宽4px
	ctx.strokeStyle='#333'//设置描边颜色
	ctx.stroke();//绘制已定义好的路径
	//绘制矩形快速方法
	ctx.beginPath();
	ctx.rect(400,250,300,150);
	ctx.closePath();
	ctx.fillStyle='blue';//设置填充颜色
	ctx.fill();//填充已定义好的路径
	ctx.lineWidth=4;//绘制线宽4px
	ctx.strokeStyle='orange'//设置描边颜色
	ctx.stroke();//绘制已定义好的路径
	//绘制矩形快速方法
	ctx.beginPath();
	ctx.fillStyle='orange';//若不设置会继承上面动画的颜色
	ctx.fillRect(50,450,300,100);
	ctx.strokeStyle='blue';
	ctx.strokeRect(50,450,300,100);
	ctx.closePath();


	//圆形绘制
	ctx.beginPath();
	ctx.arc(450,500,80,0,2*Math.PI,false);
	ctx.closePath();
	ctx.fillStyle='red';
	ctx.fill();
	//半圆
	ctx.beginPath();
	ctx.arc(650,500,80,0,Math.PI,true);
	ctx.closePath();
	ctx.fillStyle='red';
	ctx.fill();
	//半圆
	ctx.beginPath();
	ctx.arc(650,500,80,0,Math.PI,false);
	ctx.closePath();
	ctx.fillStyle='blue';
	ctx.fill();
</script>
</html>
<!-- IE 6 7 8不支持 <canvas>标签 -->


3、贝塞尔曲线

quadraticCurveTo (cx,cy,ex,ey)
二次贝塞尔曲线，一个控制点，一个结束点


bezierCurveTo (cx1,cy1,cx2,cy2,ex,ey)
三次贝塞尔曲线，两个控制点，一个结束点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas-绘制贝塞尔曲线</title>
<style>
*{margin:0;padding:0;list-style: none;}
#myCanvas{
	margin:20px auto 0;
	background: #eee;
	border:1px solid #666;
}
</style>
</head>
<body>
	<canvas id="myCanvas"width="600" height="600">亲，别再用古董浏览器了
	！</canvas>
</body>
<script>
	var cvs=document.getElementById('myCanvas');//画纸
	var ctx=cvs.getContext('2d');//画笔
	//二次贝塞尔曲线，一个控制点，一个结束点
	ctx.beginPath();//开始一个路径
	ctx.moveTo(66,34);//起点
	ctx.quadraticCurveTo(551,50,220,57);
	ctx.lineWidth=4;
	ctx.strokeStyle='red';
	ctx.stroke();
	ctx.closePath();//关闭绘制路径--自动闭合终点和起点
	
	//三次贝塞尔曲线，两个控制点，一个结束点
	ctx.beginPath();//开始一个路径
	ctx.moveTo(62,180);//起点
	ctx.bezierCurveTo(398,333,56,100,277,151);
	ctx.lineWidth=4;
	ctx.strokeStyle='#666';
	ctx.stroke();
	ctx.closePath();
</script>
</html>
<!-- IE 6 7 8不支持 <canvas>标签 -->


四、文字的绘制

fillText(text,x,y,maxWidth): 填充绘制
text表示文字      x、y为坐标
maxWidth可选，为文字最大宽度，防止文字溢出

strokeText(text,x,y,maxWidth): 描边绘制
text表示文字      x、y为坐标
maxWidth可选，为文字最大宽度，防止文字溢出；


常用属性设置：
font 文本内容的当前字体属性
示例: ctx.font = 'bold 60px 微软雅黑';
textAlign 文本内容的当前对齐方式
示例: ctx.textAlign=“left/center/right”; 
textBaseline 绘制文本时使用的当前文本基线
示例: ctx.textBaseline=“ top/middle/ bottom ”;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas-filltext-绘制文字</title>
<style>
*{margin:0;padding:0;list-style: none;}
#myCanvas{
	background: #eee;
	border:1px solid #666;
}
.box{
	width:400px;
	height:200px;
	border:1px solid red;
	position: absolute;
	left:200px;
	top:100px;
}
</style>
</head>
<body>
	<!-- 画布宽高写在标签里- -->
	<canvas id="myCanvas" width="600" height="600">亲，别再用古董浏览器了
	！</canvas>
	<div class="box"></div>
	<button id="btn">清除</button>
</body>
<script>
	var cvs=document.getElementById('myCanvas');//画纸
	var ctx=cvs.getContext('2d');//画笔

	ctx.beginPath();
	ctx.font='bold 60px 微软雅黑';
	// ctx.textBaseline='bottom';//textBaseline 绘制文本时使用的当前文本基线
	ctx.textBaseline='middle';
	// ctx.textBaseline='top';
	// ctx.textAlign='center';//对齐方式
	ctx.fillText('画布填充文字',200,100);
	ctx.closePath();

	btn.onclick=function(){
		ctx.clearRect(0,0,400,200);//清除局部画布
		// ctx.clearRect(0,0,cvs.width,cvs.height);//清除局部画布
	}
</script>
</html>


五、图形的阴影

阴影属性：
shadowColor：设置阴影颜色
shadowBlur：设置阴影模糊级别
shadowOffsetX：设置阴影在x轴上距离图形的距离
shadowOffsetY：设置阴影在y轴上距离图形的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas-图形的阴影</title>
<style>
*{margin:0;padding:0;list-style: none;}
#myCanvas{
	margin:20px auto 0;
	background: #eee;
	border:1px solid #666;
}
</style>
</head>
<body>
	<canvas id="myCanvas"width="600" height="600">亲，别再用古董浏览器了
	！</canvas>
</body>
<script>
	var cvs=document.getElementById('myCanvas');//画纸
	var ctx=cvs.getContext('2d');//画笔

	ctx.beginPath();
	ctx.arc(150,150,100,0,2*Math.PI,true);
	ctx.closePath();
	ctx.shadowColor='red';
	ctx.shadowBlur=20;
	ctx.shadowOffsetX=10;
	ctx.shadowOffsetY=10;
	ctx.fillStyle='blue';
	ctx.fill();

	ctx.beginPath();
	ctx.arc(400,150,100,0,2*Math.PI,true);
	ctx.closePath();
	ctx.shadowColor='red';
	ctx.shadowBlur=20;
	ctx.shadowOffsetX=5;
	ctx.shadowOffsetY=5;
	ctx.fillStyle='#fff';
	ctx.fill();

	ctx.beginPath();
	ctx.fillStyle='blue';
	ctx.shadowColor='#000';
	ctx.shadowBlur=10;
	ctx.shadowOffsetX=5;
	ctx.shadowOffsetY=5;
	ctx.fillRect(50,300,200,100);
	ctx.closePath();
	

	ctx.beginPath();
	ctx.fillStyle='green';
	ctx.shadowColor='#000';
	ctx.shadowBlur=10;
	ctx.shadowOffsetX=-5;
	ctx.shadowOffsetY=-5;
	ctx.fillRect(300,300,200,100);
	ctx.closePath();
	
</script>
</html>
<!-- IE 6 7 8不支持 <canvas>标签 -->


六、清除画布

ctx.clearRect(x,y,width,height):
x : 清除起点横坐标
y : 清除起点纵坐标
width : 清除长度
height : 清除高度

清除画布：
ctx.clearRect(0,0,cvs.width,cvs.height);

用canvas实现各种效果：

1-canvas-碰壁反弹：

<span style="font-size:14px;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas-碰壁反弹</title>
<style>
*{margin:0;padding:0;list-style: none;}
#myCanvas{
	background: #eee;
	border:1px solid #666;
}
.box{
	width:800px;
	height: 600px;
	margin:0 auto;
}
</style>
</head>
<body>
<div class="box">
	<canvas id="myCanvas"width="800" height="600">亲，别再用古董浏览器了
	！</canvas>
</div>
</body>
<script>
	var cvs=document.getElementById('myCanvas');//画纸
	var ctx=cvs.getContext('2d');//画笔
	var x=0,y=0;
	var flagh=true,flagv=true;//标记运动方向
	setInterval(function(){
		//每次画之前清除之前画的
		ctx.clearRect(0,0,cvs.width,cvs.height);
		if (flagh) {
			x++;
			if (x>=cvs.width-50) {
				flagh=false;
			}
		}else{
			x--;
			if (x<=0) {
				flagh=true;
			}
		}
		if (flagv) {
			y++;
			if (y>=cvs.height-50) {
				flagv=false;
			}
		}else{
			y--;
			if (y<=0) {
				flagv=true;
			}
		}
		ctx.beginPath();
		ctx.fillStyle='blue';
		ctx.fillRect(x,y,50,50);
		ctx.closePath();
	},2)
</script>
</html></span>


2-canvas-拖拽画画： 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas-拖拽画画</title>
<style>
*{margin:0;padding:0;list-style: none;}
body{background: #000;}
#myCanvas{
	background: #eee;
	border:1px solid #666;
	cursor:pointer;
}
.box{
	width:1000px;
	height: 600px;
	margin:0 auto;
}
</style>
</head>
<body>
<div class="box">
	<canvas id="myCanvas"width="1000" height="600">亲，别再用古董浏览器了
	！</canvas>
	<button id="btn">清除</button>
</div>
</body>
<script>
	var cvs=document.getElementById('myCanvas');//画纸
	var ctx=cvs.getContext('2d');//画笔
	var x=0,y=0;
	var btn=document.getElementById('btn');
	btn.onclick=function(){
		ctx.clearRect(0,0,cvs.width,cvs.height);
	}
	cvs.onmousedown=function(ev){
		var e=ev||window.event;
		x=e.clientX-cvs.offsetLeft;//起点X
		y=e.clientY-cvs.offsetTop;//起点Y
		ctx.beginPath();
		ctx.moveTo(x,y);
		document.onmousemove=function(ev){
			var e=ev||window.event;
			x=e.clientX-cvs.offsetLeft;//移动点X
			y=e.clientY-cvs.offsetTop;//移动点Y
			ctx.lineTo(x,y);
			ctx.lineWidth=4;
			ctx.strokeStyle='red'
			ctx.stroke();
		}
		document.onmouseup=function(){
			// ctx.closePath();
			document.onmousemove=null;
		}
	}
</script>
</html>




















































































nodecanvas组件学习
小窝
11-02 2771
目录 叶节点 Leafs 1、行为Action 2、判断Condition 控制组件 Composites 1、顺序执行器Sequencer 2、选择执行器Selector 3、概率选择执行器 Probability Selector 4、权重选择执行器Priority Selector 5、平行执行器Parallel 6、轮流选择器Flip Selector 7、完整执行器Step Sequencer 8、 二元选择器Binary Sele...
html学习笔记，canvas基于原图缩放，canvas绘制图形，canvas重绘所有图形，canvas图形被覆盖问题
m0_37542524的博客
06-27 1551
文章目录1，效果展示2，代码干货 canvas画布，若果每次都在现有canvas基础上缩放图片，n此之后，图片质量会很差，现在解决方法是图片加载到canvas上的时候，保存一份dataURL。之后的resize都基于原图去做。 这样 就会带来一个问题，在canvas上画的图形，无法在resize原图时在画布上展示。解决方案，抽象绘制图形为一个对象，保存要花的所有图形。提供绘图接口函数。 每次要画一个图形，比如一个框，现将框保存到绘图对象中，然后再调用绘图对象的绘图接口。 当resize画布的时候，调用绘图
H5基础（5）-HTML5绘图canvas
zrr_rory的博客
09-04 706
canvas绘图API1.1 Canvas的Context对象要使用Canvas来绘制图形必须在页面中添加Canvas的标签<canvas id="demoCanvas" width="500" height="500"> <p> 请使用支持HTML5的浏览器查看本实例 </p> </canvas>只有上面的标签，只能是创建好了一个画布，其中width和height属性就是设置画布的大小。Id属
node环境安装canvas并自定义字体
weixin_34116110的博客
06-20 1694
为什么要在服务端装canvas？ 因为并不是所有的客户端都能很好的支持canvas（比如微信小程序不能修改自定义字体），所以我们需要一个能够在服务端生成图片的，然后将图片传输 &lt;!-- more --&gt; 安装node-canvas 1. 更新编译环境 sudo apt-get install libcairo2-dev li...
node利用canvas处理图像，返回给前端，
weixin_42952411的博客
07-20 3232
1.安装 canvas npm i canvas -s 2.引入 const { createCanvas, loadImage } = require('canvas'); const canvas = createCanvas(width, height); const context = canvas.getContext('2d') 3.处理 //这里是因为传入多个坐标，所以进行了循环 //imag 要加载的图片，0，0，分别代表x，坐标，后两个参数分别代表宽度和高度 context.drawI
牛客网练习题
Shmily的博客
05-09 1106
1、哪个操作是W3C标准定义的阻止事件向父容器传递： 答案：e.stopPropagation() 答案详解： DOM中的事件对象：（符合W3C标准） preventDefault() 取消事件默认行为 stopImmediatePropagation() 取消事件冒泡同时阻止当前节点上的事件处理程序被调用。 stopPropagation() 取消事件冒泡对当前节点无影响。 IE中的事件对象： cancelBubble() 取消事件冒泡 returnValue()
canvas涂鸦（含node后端）_微信小程序模板js代码前台前端H5页面源码.rar
08-09
这篇文档将深入解析&ldquo;canvas涂鸦（含node后端）_微信小程序模板js代码前台前端H5页面源码.rar&rdquo;这个压缩包中的关键知识点，它包含了一整套用于实现微信小程序和H5页面的涂鸦功能的源码，以及一个基于Node.js的后端...
精选资源
H5_GuideMap:基于Vue3.x开发的移动端手绘地图项目，包含语音讲解和小程序导航功能
05-05
4. **手绘地图**：手绘地图是一种定制化和艺术化的地图表现形式，项目可能使用SVG（Scalable Vector Graphics）或Canvas等技术来实现，以提供独特的视觉效果和高度的可定制性。 5. **语音讲解**：语音讲解功能可能...
H5打开pdf格式文件，实现原理canvas
06-29
4. **绘制到canvas**：这些绘图指令被用来在canvas上进行绘制。PDF.js会将这些指令转换为适当的canvas API调用，如`context.drawImage`或`context.fillText`。 5. **生成base64**：在canvas上绘制完成后，我们可以...
网页端抠图实现 H5抠图 canvas抠图 在线抠图
06-08
Canvas是HTML5中的一个绘图元素，它允许开发者通过JavaScript进行动态图形绘制。在抠图应用中，Canvas扮演了图像处理平台的角色。开发者可以通过canvas的`drawImage()`方法将图片加载到画布上，然后利用`...
HTML5利用Canvas绘制图形(使用图像、裁剪区域、使用文本。阴影效果和操作像素)
~~~~~~~~~~~~
05-28 3497
使用图像 在canvas中插入图像 Insert title here function Draw(){ //使用三种方式插入图像 var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d"); var newImg=ne
Canvas 绘图使用语法
zaxheartless的专栏
07-05 2156
Canvas 通过 JavaScript 来绘制 2D图形。Canvas 是逐像素进行渲染的。 在canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
碰撞的小球C语言讲解,碰撞的小球 HTML5
weixin_27012007的博客
05-24 315
MyWebvar ctx;var r=10;var x=200;var y=200;var tevent;var spx;var spy;function init(){ctx = document.getElementById("canvas").getContext("2d");ctx.lineWidth = 10;ctx.strokeRect(0,0,400,400);}function d...
html5画布画点,使用JavaScript在HTML5画布上绘制大量的点
weixin_30375113的博客
06-24 456
既然你在评论部分提出了一个完全不同的问题,我想给它另一个答案.评论和工作代码内联.var margin = {top: 20, right: 20, bottom: 20, left: 40},w = 100 - margin.left - margin.right,h = 100 - margin.top - margin.bottom;var canvas = d3.select("canva...
前端笔记（H5画布canvas）
weixin_45644355的博客
05-19 394
名为“ctx”的变量是某个HTML5画布对象的上下文。以下代码绘制的是什么（） Ctx.arc(x,y,r,0,Math.PI,true); 答： 在给定点绘制一个半圆 Ctx.arc(x,y,r,0,2Math.PI,true);才是绘制一整个圆 ...
1.canvas矩形的绘制以及线的绘制
Rui_cong的博客
11-24 733
1-1：Canvas矩形以及线的API Canvas的API提供了如下三个方法： 方法简介   clearRect(double x,double y,double w,double h)   该方法是清除坐标(x,y)的宽为w，高为h的矩形。   strokeRect(double x,double y,double
canvas arc()方法详解
热门推荐
记得笑的博客
12-14 1万+
arc方法是2D画布的一个绘制圆状态的一个方法，arc有六个参数：arc(x, y, r, sAngle, eAngle, counterclockwise);六个参数对应的意思： x,y表示圆心坐标 r 表示圆的半径 sAngle : 表示开始绘制的角度 eAngle : 表示结束绘制的角度 counterclockwise ： 表示顺时针绘制还是逆时针，false = 顺时针，t...
学习笔记合集
ai_121169的博客
07-23 382
学习流程和自身总结
HTML5 Canvas 开发 绘图方法整理 【十一、Canvas图形阴影&&文字阴影效果】
freedomVenly的博客
02-19 1154
关于Canvas 阴影效果 分以下四种属性： ctx.shadowBlur 设置阴影的模糊级别 ctx.shadowOffsetX 设置形状与阴影的水平距离。 ctx.shadowOffsetY 设置形状与阴影的垂直距离。 ctx.shadowColor 设置阴影的颜色 在CSS3 中也有阴影的效果，两种用起来效果基本相同。 阴影效...
微信小程序专属Canvas库miniprogram-canvas-sugarjs
资源摘要信息:&quot;miniprogram-canvas-sugarjs是一个专门为微信小程序打造的Canvas库，旨在提供类似于H5原生JS Canvas库-FabricJS的功能。开发者可以通过npm构建工具进行安装和使用，具体使用方法如下：首先，通过命令...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值