文档章节

Canvas01

wei0925
 wei0925
发布于 2017/06/27 22:53
字数 2183
阅读 14
收藏 0

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

canvas
地理位置
调用摄像头 麦克风
本地存储

#1.1 canvas简介 ###1、什么是canvas? canvas是一个html标签,但是给js提供了接口,通过js代码可以在canvas元素上画图

#1.2 canvas的应用 游戏
炫酷效果、banner
报表,可视化数据(主要)
地图
图形编辑器、模拟器

#1.3 附录 Canvas 案例 游戏、炫酷效果:http://unclealan.cn/my/demos/
报表,可视化数据: http://echarts.baidu.com/examples.html

#1.4canvas 基础 ###1、canvas 元素的属性 width
height

###2、canvas 元素的方法 ####1. 获取绘图环境,参数2d,webgl getContext("2d / webgl")

####2. 绘图环境2d 坐标:x左标 y坐标
原点:左上角

###3、例子: 1.html <head> <style> canvas{ background: red; border:1px solid green; } </style> </head> <body> <canvas width="500" height="400" id="mycanvas">您的垃圾浏览器不兼容canvas</canvas> <script> // 获取canvas元素 var mycanvas = document.querySelector("#mycanvas");

			// 获取绘图环境(对象)
			var cxt = mycanvas.getContext("2d")

			// 快速绘制 矩形
			cxt.fillRect(100,100,200,50)
		</script>
	</body>

#1.5 Canvas 基本绘画 ###1、画线 2.html,3.html moveTo(x, y) 起始点坐标(重新开始起始点)
lineTo(x, y) 结束点坐标(接着上一个点);没有moveTo,第一个lineTo就是起始点

####1. 实例:画三条杠 4.html <body> <canvas id="mycanvas">您的垃圾浏览器不兼容canvas</canvas> <script> // 获取canvas元素 var mycanvas = document.querySelector("#mycanvas");

				// 设置画布大小
				mycanvas.width = 600;
				mycanvas.height = 500;
				mycanvas.style.border = "1px solid #eee";

				// 获取绘图环境
				var cxt = mycanvas.getContext("2d");

				// 第一条杠
				cxt.beginPath()
				cxt.moveTo(200,100);
				cxt.lineTo(400,100);
				cxt.lineWidth = 10;
				cxt.strokeStyle = "red";
				cxt.stroke();

				// 第二条杠
				cxt.beginPath()
				cxt.moveTo(200,200);
				cxt.lineTo(400,200);
				cxt.strokeStyle = "yellow";
				cxt.stroke();

				// 第三条杠
				cxt.beginPath()
				cxt.moveTo(200,300);
				cxt.lineTo(400,300);
				cxt.strokeStyle = "blue";
				cxt.stroke();
			</script>
		</body>

###2、矩形

####1. 复杂绘制 由多条线组成

####2. 快速绘制 rect(x, y, w, h) 绘制矩形的路径

strokeRect(x,y,w,h) 绘制描边的矩形

fillStyle(x,y,w,h) 绘制的填充的矩形

####3. 清除矩形 clearRect(x,y,w,h) (绘制的矩形区域内的内容将被擦除)

####4. 清除画布(重新设置canvas的宽度) canvas.width = canvas.width;
canvas.width = 200;

####5. 实例: 6.html <body> <canvas id="mycanvas">您的垃圾浏览器不兼容canvas</canvas> <script> // 获取canvas元素 var canvas = document.querySelector("#mycanvas");

				// 设置画布大小
				canvas.width = 600;
				canvas.height = 500;
				canvas.style.border = "1px solid #eee";

				// 获取绘制环境
				var cxt = canvas.getContext("2d");

				// 1. 绘制矩形
				cxt.beginPath();
				cxt.moveTo(50,10);
				cxt.lineTo(200,10);
				cxt.lineTo(200,50);
				cxt.lineTo(50,50);
				cxt.lineTo(50,10);
				
				// 描边
				cxt.lineWidth = 10;
				cxt.strokeStyle = "red"
				cxt.stroke();

				// 2. 快速绘制矩形路径
				cxt.beginPath();
				cxt.rect(100,100,100,50);
				cxt.strokeStyle = "green"
				cxt.stroke();	
				cxt.fillStyle = "purple"
				cxt.fill()	//以下两种不是路径;所以不具有填充路径或描边路径

				// 3. 快速绘制描边矩形
				cxt.strokeStyle = "yellow"	//必须放strokeRect前面
				cxt.strokeRect(100,200,100,50);

				// 4. 快速绘制填充矩形
				cxt.fillStyle = "pink"	//必须放fillRect前面
				cxt.fillRect(100,300,100,50);

				// 5. 清除矩形
				cxt.clearRect(180,100,300,200);
				// cxt.clearRect(0,0,300,200);

				// 6. 清除画布
				// canvas.width = canvas.width;
				canvas.width = 200;
			</script>
		</body>

###3、画圆(弧) arc(x,y,r,start, end, true/false)
最后一个参数是表示 顺时针(false)还是逆时针(true) 默认false

####1. 实例:画圆 7.html <body> <canvas id="mycanvas">您的垃圾浏览器不兼容canvas</canvas> <script> // 获取canvas元素 var canvas = document.querySelector("#mycanvas");

				// 设置画布大小
				canvas.width = 600;
				canvas.height = 500;
				canvas.style.border = "1px solid #eee";

				// 获取绘制环境
				var cxt = canvas.getContext("2d");

				// 绘制圆形
				cxt.arc(300,250,150,0,Math.PI*2)
				
				// 描边
				cxt.lineWidth = 10;
				cxt.strokeStyle = "red"
				cxt.stroke();
			</script>
		</body>

####2. 实例:画弧 8.html <body> <canvas id="mycanvas">您的垃圾浏览器不兼容canvas</canvas> <script> // 获取canvas元素 var canvas = document.querySelector("#mycanvas");

				// 设置画布大小
				canvas.width = 600;
				canvas.height = 500;
				canvas.style.border = "1px solid #eee";

				// 获取绘制环境
				var cxt = canvas.getContext("2d");

				// 绘制圆形
				cxt.beginPath();
				cxt.arc(300,250,150,0,Math.PI/2,false)
				cxt.closePath();
				
				// 描边
				cxt.lineWidth = 10;
				cxt.strokeStyle = "red"
				cxt.stroke();

				// 填充
				cxt.fillStyle = "yellow"
				cxt.fill();
			</script>
		</body>

####3. 实例:画扇形图 9.html <body> <canvas id="mycanvas">您的垃圾浏览器不兼容canvas</canvas> <script> // 定义数据 var data = [ {name:"蛋白质",value:0.1,color:"red"}, {name:"葡萄糖", value:0.2, color:"orange"}, {name:"脂肪", value:0.15, color:"yellow"}, {name:"氨基酸", value:0.35, color:"green"}, {name:"维生素", value:0.15, color:"blue"}, {name:"微量元素", value:0.05, color:"purple"} ]

		// 定义宽高
		var w = 600;
		var h = 500;
		var r = 150;

		// 获取canvas元素
		var canvas = document.querySelector("#mycanvas");

		// 设置画布大小
		canvas.width = w;
		canvas.height = h;
		canvas.style.border = "1px solid #eee";

		// 获取绘制环境
		var cxt = canvas.getContext("2d");

		// 设置起始弧度
		var startAngle = 0;

		// 设置文字起始位置
		var textW = w/2+80;
		var textH = h/2-10;

		// 绘制扇形图
		data.forEach((item)=>{
			// 设置结束弧度
			var endAngle = startAngle + item.value * Math.PI * 2;

			// 开始路径
			cxt.beginPath();

			// 设置起始位置
			cxt.moveTo(w/2,h/2);

			// 设置弧度
			cxt.arc(w/2,h/2,r,startAngle,endAngle);

			// 填充颜色
			cxt.fillStyle = item.color;
			cxt.fill();

			// 定义下一次的起始弧度
			startAngle = endAngle
		})
	</script>
</body>

###4、文字 font 属性;设置大小和字体

textAlign 属性;文字的水平对齐方式
start(默认)/end/left/right/center

textBaseLine 属性;文字的垂直对齐方式
alphabetic(默认)/top/bottom/middle

fillText(text, x, y) 填充文字

strokeText(text, x, y) 描边文字

measureText(text) 返回该文本在画布中所占的宽度

####1. 实例:填充文字、描边文字 10.html <body> <canvas id="mycanvas">您的垃圾浏览器不兼容canvas</canvas> <script> // 定义宽高 var w = 600; var h = 500; var r = 150;

				// 获取canvas元素
				var canvas = document.querySelector("#mycanvas");

				// 设置画布大小
				canvas.width = w;
				canvas.height = h;
				canvas.style.border = "1px solid #eee";

				// 获取绘制环境
				var cxt = canvas.getContext("2d");

				// 填充文字
				// cxt.font = "bold italic 30px 微软雅黑";
				cxt.font = "30px 微软雅黑";
				cxt.fillStyle = "red"
				cxt.fillText("hello",100,100);

				// 描边文字
				cxt.font = "bold 50px 微软雅黑";
				cxt.strokeStyle = "green"
				cxt.strokeText("hello",200,100);
			</script>
		</body>

####2. 实例:文字的对齐方式、字体宽度 11.html <body> <canvas id="mycanvas">您的垃圾浏览器不兼容canvas</canvas> <script> // 定义宽高 var w = 600; var h = 500; var r = 150;

				// 获取canvas元素
				var canvas = document.querySelector("#mycanvas");

				// 设置画布大小
				canvas.width = w;
				canvas.height = h;
				canvas.style.border = "1px solid #eee";

				// 获取绘制环境
				var cxt = canvas.getContext("2d");

				// 画一条水平线跟一条垂直线
				// 垂直线
				cxt.beginPath();
				cxt.moveTo(w/2,0);
				cxt.lineTo(w/2,h);

				// 水平线
				cxt.moveTo(0,h/2);
				cxt.lineTo(w,h/2);

				// 线描边
				cxt.strokeStyle = "green";
				cxt.stroke()

				// 写文字
				cxt.font = "bold 30px 微软雅黑";
				cxt.fillStyle = "red"

				// 文字的水平对齐方式
				cxt.textAlign = "center";

				cxt.textAlign = "right";
				cxt.textAlign = "end";

				cxt.textAlign = "left";
				cxt.textAlign = "start";

				// 填充文字
				cxt.fillText("hello",w/2,200);

				// 文字的垂直对齐方式
				cxt.textBaseline = "top"
				cxt.textBaseline = "bottom"
				cxt.textBaseline = "middle"
				cxt.textBaseline = "alphabetic"	//默认


				// 描边文字
				cxt.font = "bold 50px 微软雅黑";
				cxt.strokeStyle = "green"
				cxt.strokeText("hello",100,h/2);

				cxt.font = "bold 12px 微软雅黑";
				console.log(cxt.measureText("边宽大小").width)	//受字体大小影响
			</script>
		</body>

###5、路径开始和闭合 4.html,5.html beginPath() 开启新的路径(状态);并且结束前面的路径
closePath() 结束当前路径;并且使当前路径闭合

###6、描边 stroke() 填充当前路径
strokeStyle 属性,设置描边颜色
lineWidth 属性,设置描边线条宽度

###7、填充 fill() 填充当前的路径
fillStyle 属性,设置填充的颜色
注意: 非0环绕的算法

#1.6 作业 ###1、使用循环,画10行10列表格 <body> <canvas id="mycanvas">您的垃圾浏览器不兼容canvas</canvas> <script> // 定义宽高 var w = 600; var h = 600;

			// 获取canvas元素
			var canvas = document.querySelector("#mycanvas");

			// 设置画布大小
			canvas.width = w;
			canvas.height = h;
			canvas.style.border = "1px solid #eee";

			// 获取绘制环境
			var cxt = canvas.getContext("2d");

			for(var i = 0; i <= 10; i++){
				// 绘制垂直线
				cxt.beginPath();
				cxt.moveTo(i*50,0);
				cxt.lineTo(i*50,500);
				cxt.strokeStyle = "red";
				cxt.lineWidth = 2;
				cxt.stroke();

				// 绘制水平线
				cxt.beginPath();
				cxt.moveTo(0,i*50);
				cxt.lineTo(500,i*50);
				cxt.strokeStyle = "red";
				cxt.lineWidth = 2;
				cxt.stroke();
			}
		</script>
	</body>

###2、画画板: 拖动鼠标,在canvas上划线 <body> <canvas id="mycanvas">您的垃圾浏览器不兼容canvas</canvas> <script> // 定义宽高 var w = 500; var h = 500;

			// 获取canvas元素
			var canvas = document.querySelector("#mycanvas");

			// 设置画布大小
			canvas.width = w;
			canvas.height = h;
			canvas.style.border = "1px solid #eee";

			// 获取绘制环境
			var cxt = canvas.getContext("2d");

			// 鼠标按下
			var flag = false;
			canvas.onmousedown = (event)=>{
				var e1 = event || window.event;
				var startX = e1.clientX;	//获取鼠标x轴坐标
				var startY = e1.clientY;	//获取鼠标y轴坐标
				// console.log("起始坐标"+startX,startY)

				flag=true;

				// 设置起始点
				cxt.beginPath();
				cxt.moveTo(startX,startY);
			}

			// 鼠标移动
			canvas.onmousemove = (event)=>{
				var e2 = event || window.event;
				var endX = e2.clientX;	//获取鼠标x轴坐标
				var endY = e2.clientY;	//获取鼠标y轴坐标
				// console.log("结束坐标"+endX,endY)

				if(flag){
					// 设置结束点
					cxt.lineTo(endX,endY);

					// 线宽度
					cxt.lineWidth = "2"

					// 描边线
					cxt.strokeStyle = "red";
					cxt.stroke();
				}
			}

			// 鼠标抬起
			canvas.onmouseup = (event)=>{
				flag = false
			}		
		</script>
	</body>

###3. 饼状图(把文字显示在上面) <body> <canvas id="mycanvas">您的垃圾浏览器不兼容canvas</canvas> <script> // 定义数据 var data = [ {name:"蛋白质",value:0.1,color:"red"}, {name:"葡萄糖", value:0.2, color:"orange"}, {name:"脂肪", value:0.15, color:"yellow"}, {name:"氨基酸", value:0.35, color:"green"}, {name:"维生素", value:0.15, color:"blue"}, {name:"微量元素", value:0.05, color:"purple"} ]

		// 定义宽高
		var w = 600;
		var h = 500;
		var r = 150;

		// 获取canvas元素
		var canvas = document.querySelector("#mycanvas");

		// 设置画布大小
		canvas.width = w;
		canvas.height = h;
		canvas.style.border = "1px solid #eee";

		// 获取绘制环境
		var cxt = canvas.getContext("2d");

		// 设置起始弧度
		var startAngle = 0;

		// 设置文字起始位置
		var textW = w/2+80;
		var textH = h/2-10;

		// 绘制扇形图
		data.forEach((item)=>{
			// 设置结束弧度
			var endAngle = startAngle + item.value * Math.PI * 2;

			// 开始路径
			cxt.beginPath();

			// 设置起始位置
			cxt.moveTo(w/2,h/2);

			// 设置弧度
			cxt.arc(w/2,h/2,r,startAngle,endAngle);

			// 填充颜色
			cxt.fillStyle = item.color;
			cxt.fill();

			// 定义文字的位置
			var pointX=w/2+Math.cos(endAngle-(endAngle-startAngle)/2)*r/2;
			var pointY=h/2+Math.sin(endAngle-(endAngle-startAngle)/2)*r/2;

			// 填充文字
			cxt.font = "bold 12px 微软雅黑";
			cxt.fillStyle = "white"
			cxt.fillText(item.name,pointX,pointY);

			// 定义下一次的起始弧度
			startAngle = endAngle
		})
	</script>
</body>

© 著作权归作者所有

上一篇: canvas-02
下一篇: head内的准备工作
wei0925
粉丝 2
博文 15
码字总数 17278
作品 0
温州
程序员
私信 提问
wpf 窗体之间传递控件-01(未完)

最近工作,编写wpf程序,遇到这样一个问题:打开一个子窗口(称为formChild,当前窗口称为formParent),并向其传送一个canvas控件(不只是canvas控件其他同理)。 解决方法00:在formChild...

温暖的小明
2016/09/23
78
0

没有更多内容

加载失败,请刷新页面

加载更多

没有更多内容

是否有内置功能可以打印对象的所有当前属性和值?

所以我在这里寻找的是类似PHP的print_r函数。 这样一来,我可以通过查看问题对象的状态来调试脚本。 #1楼 可能值得一看- 是否有与Perl的Data :: Dumper等效的Python? 我的建议是 https://gi...

技术盛宴
18分钟前
5
0
直击面试,聊聊 GC 机制

前言 文章来源:https://studyidea.cn/ GC 中文直译垃圾回收,是一种回收内存空间避免内存泄漏的机制。当 JVM 内存紧张,通过执行 GC 有效回收内存,转而分配给新对象从而实现内存的再利用。 ...

程序通事
21分钟前
4
0
Mybatis where 1=1 和 标签

在mybatis中拼接查询语句,偶尔会出现where后面可能一个字段的值都没有,就导致所有条件无效,导致where没有存在的意义;但也有可能这些条件会存在。那解决这个问题的方法,最常见的就是: ...

观海562
23分钟前
4
0
git常用初始化设置

日志编辑工具 git config --global core.editor vim ssh访问 cd /home/weiguangyue/.sshssh-keygen -t rsa -C weiyue888999@126.com 提交者信息用户名 git config --global user.nam......

萧默
24分钟前
4
0
面试题-关于Java线程池一篇文章就够了

在Java面试中,线程池相关知识,虽不能说是必问提,但出现的频次也是非常高的。同时又鉴于公众号“程序新视界”的读者后台留言让写一篇关于Java线程池的文章,于是就有本篇内容,本篇将基于J...

程序新视界
28分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部