文档章节

canvas-03

wei0925
 wei0925
发布于 2017/07/04 22:13
字数 1432
阅读 9
收藏 0

#canvas-03 ##3.1 高级绘图 ###1、设置不透明度 --对整体(绘图环境)进行设置

  • globalAlpha 属性;设置不透明度 值为0~1 的小数

  • 例子:不透明度 4.html <body> <canvas id="canvas"></canvas>

      		<script>
      			var canvas = document.querySelector("#canvas");
    
      			canvas.width = 600;
      			canvas.height = 600;
      			canvas.style.border = "1px solid #eee";
    
      			var ctx = canvas.getContext("2d");
    
      			ctx.fillStyle = "green";
    
      			// 设置不透明度
      			ctx.globalAlpha = .5;
    
      			ctx.fillRect(100,100,200,100);
    
      			ctx.font = "50px 微软雅黑";
      			ctx.fillText("你好呀",100,400)
      		</script>
      	</body>
    

###2、裁剪画布(绘图环境) --对绘图环境进行裁切

  • clip() 沿着路径包围的部分裁切

  • 例子:裁剪画布 3.html <body> <canvas id="canvas"></canvas> <script> var canvas = document.querySelector("#canvas");

      			canvas.width = 600;
      			canvas.height = 600;
      			canvas.style.border = "1px solid #ccc";
    
      			var ctx = canvas.getContext("2d");
    
      			ctx.fillStyle = "green";
    
      			// 保存环境
      			ctx.save();
      			ctx.rect(150,150,200,300);
      			ctx.stroke();
    
      			// 裁剪画布
      			ctx.clip();	//在他之后绘制的图不在上面矩形范围内被裁减掉
    
      			ctx.fillRect(100,100,200,100);
    
      			// 释放环境
      			ctx.restore();	//释放环境之后,超出矩形的范围不被裁减
    
      			ctx.font = "50px 微软雅黑";
      			ctx.fillText("你好呀",100,400);
      		</script>
      	</body>
    

###3、画布保存为Base63编码

  • canvas.toDataURL(type, 压缩比) 类型是图片的mime类型

    • 压缩比:0-1之间的数字,用于标识输出图片的质量,1表示无损压缩

    • type:设置输出的类型,比如 image/png image/jpeg等

  • 例子: 4.html <body> <canvas id="canvas"></canvas> <script> var canvas = document.querySelector("#canvas"); canvas.width = 600; canvas.height = 600; canvas.style.border = "1px solid #ccc";

      			var ctx = canvas.getContext("2d");
    
      			ctx.fillStyle = "red";
    
      			ctx.fillRect(0,0,600,600);
    
      			ctx.fillStyle = "green";
    
      			ctx.fillRect(100,100,200,100);
    
      			ctx.font = "50px 微软雅黑";
      			ctx.fillText("你好啊", 100,400);
    
      			// 创建img节点
      			var img = document.createElement("img");
    
      			// 画布保存为Base63编码
      			img.src = canvas.toDataURL("iamge/jpeg",1);
    
      			// 将img添加到页面中
      			document.body.appendChild(img);
      		</script>
      	</body>
    

###4、画布渲染画布(重点)

  • drawIamge(canvas, 0, 0)

    • 图像在隐藏的canvas 上绘制
    • 绘制完成后 把隐藏canvas 渲染到 显示的canvas上
  • 例子:画布渲染画布 5.html <body> <canvas id="canvas1"></canvas> <canvas id="canvas2"></canvas>

      		<script>
      			var canvas1 = document.querySelector("#canvas1");
      			var canvas2 = document.querySelector("#canvas2");
      			canvas1.width = 600;
      			canvas1.height = 600;
      			canvas1.style.border = "1px solid #ccc";
    
      			//将canvas1画布隐藏
      			canvas1.style.display = "none";
    
      			canvas2.width = 600;
      			canvas2.height = 600;
      			canvas2.style.border = "1px solid red";
    
      			var ctx1 = canvas1.getContext("2d");
      			var ctx2 = canvas2.getContext("2d");
    
      			//对 canvas1 进行绘制
      			ctx1.fillStyle = "#ccc";
      			ctx1.fillRect(0,0,600,600);
    
      			ctx1.fillStyle = "green";
      			ctx1.fillRect(100,100,200,100);
    
      			ctx1.font = "50px 微软雅黑";
      			ctx1.fillText("你好啊", 100,400);
    
      			// canvas2画布渲染canvas1画布
      			ctx2.drawImage(canvas1,0,0);	//将canvas1隐藏掉的内容显示出来
      		</script>
      	</body>
    

###5、线条样式

    1. lineCap 属性;两端样式
    • butt 默认
    • round 两端多出圆角
    • square 两端多出方角
    1. lineJoin 属性;两线相交样式
    • miter 默认,尖角
    • round 相交点变成圆角
    • bevel 相交点变成斜角
    1. miterLimit 属性;设置或返回最大斜接长度
    • 注意:与两条线相交(除默认)同时使用,看不出效果
    1. 例子: 6.html <body> <canvas id="canvas"></canvas> <script> var canvas = document.querySelector("#canvas");

         		canvas.width = 600;
         		canvas.height = 600;
         		canvas.style.border = "1px solid #ccc";
      
         		var ctx = canvas.getContext("2d");
      
         		// 垂直线
         		ctx.moveTo(100, 0);
         		ctx.lineTo(100, 600);
      
         		// 垂直线
         		ctx.moveTo(500, 0);
         		ctx.lineTo(500, 600);
      
         		ctx.strokeStyle = "red";
         		ctx.stroke();
      
         		ctx.beginPath();
         		ctx.moveTo(100,100);
         		ctx.lineTo(500,100);
         		ctx.lineTo(400,150);
      
         		ctx.rect(100,250, 300, 150);
      
         		// 线条两端样式
         		ctx.lineCap = "butt";	// 默认
         		ctx.lineCap = "round";	// 两端多出圆角
         		ctx.lineCap = "square"	// 两端多出方角
      
         		// 两线相交样式
         		ctx.lineJoin = "round";	// 相交点变成圆角
         		ctx.lineJoin = "bevel";	// 相交点变成斜角
         		ctx.lineJoin = "miter";	// 默认,尖角
      
         		// 设置或返回最大斜接长度
         		ctx.miterLimit = 5;
      
         		ctx.strokeStyle = "#000";
         		ctx.lineWidth = 20;
         		ctx.stroke();
         	</script>
         </body>
      

###6、贝塞尔曲线(了解)

    1. 二次方曲线:quadraticCurveTo(cpx,cpy,x,y);
    • cpx: 贝塞尔控制点的 x 坐标
    • cpy: 贝塞尔控制点的 y 坐标
    • x : 结束点的 x 坐标
    • y : 结束点的 y 坐标
    1. 三次贝塞尔曲线:bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
    • cp1x: 第一个贝塞尔控制点的 x 坐标
    • cp1y: 第一个贝塞尔控制点的 y 坐标
    • cp2x: 第二个贝塞尔控制点的 x 坐标
    • cp2y: 第二个贝塞尔控制点的 y 坐标
    • x: 结束点的 x 坐标
    • y: 结束点的 y 坐标

###7、使用切线画弧(了解) *arcTo(x1, y1, x2, y2, r) * x1: 弧的端点1的 x 坐标 * y1: 弧的端点1的 y 坐标 * x2: 弧的端点2(终点)的 x 坐标 * y2: 弧的端点2(终点)的 y 坐标 * r : 弧的半径

###8、例子:贝塞尔曲线、使用切线画弧 7.html <body> <canvas id="canvas"></canvas> <script> var canvas = document.querySelector("#canvas");

			canvas.width = 600;
			canvas.height = 600;
			canvas.style.border = "1px solid #eee";

			var ctx = canvas.getContext("2d");

			ctx.moveTo(100,100);

			// 设置贝塞尔曲线
			ctx.quadraticCurveTo(100,300,400,100);

			ctx.stroke()

			ctx.beginPath();
			ctx.moveTo(200,200);
			ctx.lineTo(400,200)

			// 创建两条切线的弧
			ctx.arcTo(500, 200, 500, 210, 40);
			ctx.lineTo(500, 400);

			ctx.stroke();
		</script>
	</body>

###9、判断是否在路径上

  • isPointInPath(x, y) 判断x,y坐标的点是否在当前的路径中 true | false

  • 例子: 8.html <body> <canvas id="canvas"></canvas> <script> var canvas = document.querySelector("#canvas");

      			canvas.width = 600;
      			canvas.height = 600;
      			canvas.style.border = "1px solid #ccc";
    
      			var ctx = canvas.getContext("2d");
    
      			//对 canvas 进行绘制
    
      			ctx.rect(100,100,200,100);
      			ctx.fillStyle = "green";
      			ctx.stroke()
    
      			// 判断是否在路径上
      			console.log(ctx.isPointInPath(100, 150));	//true
      			console.log(ctx.isPointInPath(50, 150));	//false
      		</script>
      	</body>
    

###10、canvas库 – Konva --不用考虑绘图环境。

    1. 常见的canvas库
    1. 例子:Konva库 9.html <body> <div id="box"></div>

         	<script src="./konva.min.js"></script>
         	<script>
         		// 创建舞台
         		var stage = new Konva.Stage({
         			container:"box",
         			width:600,
         			height:600
         		});
      
         		// 创建层
         		var layer = new Konva.Layer();
      
         		// 绘制矩形
         		var rect = new Konva.Rect({
         			x:100,
         			y:100,
         			width:300,
         			height:150,
         			fill:"red",
         			stroke:"green",
         			strokeWidth:10
         		});
      
         		// 将矩形添加到层里
         		layer.add(rect);
      
         		// 将层添加到舞台
         		stage.add(layer)
         	</script>
         </body>
      

##作业 ###1、进度条效果 <head> <meta charset="UTF-8"> <title>进度条</title> <style> canvas{ position: absolute; left:10; top:10; } </style> </head> <body> <canvas id="canvas1"></canvas> <canvas id="canvas2"></canvas>

		<script>
			var canvas1 = document.querySelector("#canvas1");
			var canvas2 = document.querySelector("#canvas2");

			canvas1.width = 600;
			canvas1.height = 600;
			canvas1.style.border = "1px solid #eee";

			canvas2.width = 600;
			canvas2.height = 600;

			var ctx1 = canvas1.getContext("2d");
			var ctx2 = canvas2.getContext("2d");

			// 绘制矩形
			ctx1.strokeStyle = "gray";
			ctx1.strokeRect(100,100,400,50);

			// 设置起始坐标
			var w = 0,h = 50;
			// 设置时间
			var timer = 30
			show()
			function show(){
				ctx2.clearRect(0,0,600,600);

				ctx2.save();
				// 绘制圆形
				ctx2.rect(100,100,w,h);
				ctx2.fillStyle = "gray";
				ctx2.fill();

				ctx2.restore();
				if(w <= 400){
					w += 1;
					// setTimeout(show,timer);
					setInterval(show,timer);
				}else if(w == 400){
					// timer = clearTimeout(show,30);
					timer = clearInterval(show,30)
				}
			}
		</script>
	</body>

© 著作权归作者所有

上一篇: Canvas-04-Konva
下一篇: canvas-02
wei0925
粉丝 2
博文 15
码字总数 17278
作品 0
温州
程序员
私信 提问
WPF <ZoomableCanvas> 实现缩放移动

熟悉WPF 的朋友应该知道Canvas 默认是不支持Scale 和Offset 操作的,如果我们想对Canvas 里包含的控件进行整体缩放或移动可能会比较麻烦。Kael Rowan 提供了ZoomableCanvas 类可以方便实现上...

junwong
2012/03/09
1K
0
走进 HTML5:20个惊艳的 HTML5 Canvas 应用试验(转)

如今,HTML5 可谓如众星捧月一般,受到众多业内巨头的青睐。很多 Web 开发者也尝试着用 HTML5 来制作各种 Web 应用。HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,H...

楚广明
2012/08/25
0
0
wpf 窗体之间传递控件-01(未完)

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

温暖的小明
2016/09/23
72
0
前端日刊君来也

每天努力的日刊君 - 2017.11.22 The Next Day is Always a New Day 拖拽粘性小红球 Canvas 实现 web图像常见的应用策略与技巧 70%以上业务由H5开发,手机QQ Hybrid 的架构如何优化演进? 来自...

前端新视野
2017/11/23
0
0
ImageMagick 6.6.0-6 发布

ImageMagick 是一个用来创建、编辑、合成图片的软件。它可以读取、转换、写入多种格式的图片。图片切割、颜色替换、各种效果的应用,图片的旋转、组合,文本,直线, 多边形,椭圆,曲线,附...

红薯
2010/03/17
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
21分钟前
2
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部