文档章节

canvas-02

wei0925
 wei0925
发布于 2017/07/04 22:07
字数 2993
阅读 8
收藏 0

#canvas-02

##2.1 绘制图片 ###1、基本绘图 drawImage(img, x, y)

###2、绘图并设置大小 drawImage(img, x, y, w, h)

###3、裁剪图片 drwaImage(img, sx, sy, sw, sh, x, y, w, h) 先写原图的坐标大小,在写画布的坐标大小

###4、例子:绘制图片、 设置图片大小 2.html <body>
<canvas id="mycanvas"></canvas>
<script>
// 获取canvas元素
var canvas = document.querySelector("#mycanvas");

			// 设置宽高  
			var w = 600;  
			var h = 600;  

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

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

			// 绘制图片  
			// 添加img节点  
			var img = document.createElement("img");  

			// 给img添加src属性  
			img.src = "./3.jpg";  

			// 给img绑定事件  
			img.addEventListener("load",function(){  
				// 绘制图片  
				cxt.drawImage(img,10,10);  
			})  

			var img1 = document.createElement("img");  
			img1.src = "./2.jpg";  
			img.addEventListener("load",function(){  
				// 设置等比例图片  
				var w = 300;  
				var h = 300 * (img1.height / img1.width);	//公式  

				// 绘图并设置大小  
				cxt.drawImage(img1,300,300,w,h);  
			})  
		</script>  
	</body>  

###5、例子:裁剪图片 3.html <body> <canvas id="mycanvas"></canvas> <script> // 获取canvas元素 var canvas = document.querySelector("#mycanvas");

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

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

			// 绘制图片
			var img = document.createElement("img");
			img.src = "./1.png";
			img.addEventListener("load",function(){
				// 裁剪图片
				// cxt.drawImage(img,原图x坐标,原图y坐标,裁剪的宽度,裁剪的高度,裁剪后图片所放的x坐标,裁剪后图片所放的y坐标,裁剪后图片宽度,裁剪后图片高度)

				cxt.drawImage(img,160,0,300,400,10,10,300,400)
			})
		</script>
	</body>

###6、例子:图片动画 4.html <body> <canvas id="mycanvas"></canvas> <br> <div id="btn-list"> <button data-dir="1">←</button> <button data-dir="3">↑</button> <button data-dir="0">↓</button> <button data-dir="2">→</button> </div> <script> var canvas = document.querySelector("#mycanvas");

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

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

			// 设置相关变量

			// 时间间隔
			var time = 200;

			// 人物宽度
			var renW = 50;

			// 人物高度
			var renH = 70;

			// 前进方向
			var direction = 0;

			// 循环变量
			var i = 0;

			// 绘制图片
			var img = document.createElement("img");
			img.src="./p.png";

			img.addEventListener("load",function(){
				// 设置定时器
				setInterval(function(){
					// 清空画布
					cxt.clearRect(0,0,400,400);

					// 裁剪图片
					cxt.drawImage(img,i * renW, direction * renH, renW, renH, 100, 100, renW, renH);

					i ++ ;

					// 每4次一个循环
					i %= 4;
				},time)
			})

			// 获取button
			var btnList = document.querySelectorAll("#btn-list button");
			for (var i = 0; i < btnList.length; i ++) {
				btnList[i].onclick = function(){
					direction = this.dataset.dir;
				}
			}

		</script>
	</body>

##2.2 高级绘画 ###1、阴影

  • shadowColor 属性 阴影颜色
  • shadowBlur 属性 模糊值
  • shadowOffsetX 属性 水平方向的偏移量
  • shadowOffsetY 属性 垂直方向的偏移量

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

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

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

				// 绘制矩形
				// 填充颜色
				cxt.fillStyle = "red";

				// 设置阴影
				cxt.shadowColor = "pink";	//阴影颜色
				cxt.shadowBlur = 5;		//模糊度
				cxt.shadowOffsetX = 5;	//x轴偏移量
				cxt.shadowOffsetY = 5;	//y轴偏移量

				// 填充矩形
				cxt.fillRect(100,100,200,100);

				// 描边矩形
				cxt.strokeRect(300,300,100,100);

				// 写字
				cxt.font = "bold 30px 微软雅黑"
				cxt.fillText("Hello",200,300);
			</script>
		</body>

###2、渐变 --对整个画布进行渐变

####1. 线性渐变

  • createLinearGradient(x0, y0, x1, y1);
  • graObj.addColorStop(位置, 颜色) 位置是0~1之间的小数

####2. 例子:线性渐变 6.html <body> <canvas id="mycanvas"></canvas> <script> var canvas = document.querySelector("#mycanvas");

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

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

				// 创建线性渐变
				var grd = cxt.createLinearGradient(0,0,600,0);
				grd.addColorStop(0,"red");
				grd.addColorStop(0.5,"yellow");
				grd.addColorStop(1,"green");

				// 绘制矩形
				cxt.fillStyle = grd;
				cxt.fillRect(100,100,200,100);

				// 绘制圆
				cxt.arc(350,350,100,0,Math.PI*2);
				cxt.lineWidth = 20;
				cxt.strokeStyle = grd;
				cxt.stroke();
			</script>
		</body>

####3. 径向渐变

  • createRadialGradient(x0, y0, r0, x1, y1, r1);
  • graObj.addColorStop(位置, 颜色)

####4. 例子: 径向渐变 7.html <body> <canvas id="mycanvas"></canvas> <script> var canvas = document.querySelector("#mycanvas");

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

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

				// 创建径向渐变
				var grd = cxt.createRadialGradient(300,300,50,300,300,300);
				grd.addColorStop(0, "red");
				grd.addColorStop(0.2, "orange");
				grd.addColorStop(0.4, "yellow");
				grd.addColorStop(0.6, "green");
				grd.addColorStop(0.8, "cyan");
				grd.addColorStop(1, "blue");

				// 绘制矩形
				cxt.fillStyle = grd;
				cxt.fillRect(0,0,w,h);
			</script>
		</body>

###3、背景填充
--填充对象跟渐变对象类似,相当于一种颜色

  • createPattern(img, repeat) 第二个参数是填充方式

    • 填充方式:
      • repeate 重复
      • repeate-x x轴重复
      • repeate-y y轴重复
      • no-repeate 不重复
  • 例子:填充背景图 8.html <body> <canvas id="mycanvas"></canvas> <script> var canvas = document.querySelector("#mycanvas");

      			var w = 600;
      			var h = 600;
      			canvas.width = w;
      			canvas.height = h;
      			canvas.style.border = "1px solid #eee";
    
      			var cxt = canvas.getContext("2d");
    
      			// 创建图片
      			var img = document.createElement("img");
      			img.src = "./2.jpg";
      			img.addEventListener("load",function(){
      				// 设置背景图
      				var pat = cxt.createPattern(img,"repeat")
    
      				// 绘制矩形
      				cxt.fillStyle = pat;
      				cxt.fillRect(10,10,300,300);
      				cxt.strokeRect(10,10,300,300)
      			})
      		</script>
      	</body>
    

###4、变换 --改变的是画布

####1. 缩放 scale(w, h)

####2. 例子:缩放 9.html <body> <canvas id="mycanvas"></canvas> <script> var canvas = document.querySelector("#mycanvas");

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

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

				// 缩放
				cxt.scale(2,2);	//放大2倍
				
				// 绘制矩形
				cxt.fillStyle = "green";
				cxt.fillRect(10,10,200,100);

				// 缩放
				cxt.scale(0.5,0.5);	//缩小

				// 绘制圆
				cxt.beginPath();
				cxt.arc(300,300,150,0,Math.PI*2);
				cxt.strokeStyle = "red";
				cxt.lineWidth = 10;
				cxt.stroke();

				cxt.scale(1.5,0.5);
				// 写字
				cxt.font = "30px 微软雅黑";
				cxt.fillText("你好",200,500);
			</script>
		</body>

####3. 位移 translate(w, h)

####4. 例子:位移 10.html <body> <canvas id="mycanvas"></canvas> <script> var canvas = document.querySelector("#mycanvas");

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

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

				// 缩放
				cxt.scale(2,2);	//放大2倍
				
				// 绘制矩形
				cxt.strokeStyle = "green";
				cxt.lineWidth = 2;
				cxt.strokeRect(0,0,100,50);

				// 位移
				cxt.translate(100,100);

				// 位移后的矩形位置发生改变
				cxt.strokeRect(0,0,100,50)
			</script>
		</body>

####5. 旋转 rotate(angle) 弧度 --配合位移使用效果更加好

####6. 例子:旋转 11.html <body> <canvas id="mycanvas"></canvas> <script> var canvas = document.querySelector("#mycanvas");

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

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

				// 缩放
				cxt.scale(2,2);	//放大2倍
				
				// 绘制矩形
				cxt.strokeStyle = "green";
				cxt.lineWidth = 2;
				cxt.strokeRect(100,100,100,50);

				// 位移
				cxt.translate(100,100);

				// 旋转
				cxt.rotate(Math.PI / 4);	//旋转45度

				// 旋转配合位移使用效果更加好
				cxt.strokeStyle = "red";
				cxt.strokeRect(0,0,100,50)
			</script>
		</body>

####7. 绘图环境的保存和释放

  • save() 保存当前的绘图环境
  • restore() 释放前面保存的绘图环境

####8. 例子:矩形一直旋转效果 12.html --旋转配合位移、环境保存和释放的效果 <body> <canvas id="mycanvas"></canvas> <script> var canvas = document.querySelector("#mycanvas");

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

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

				// 填充矩形
				cxt.fillStyle = "red";
				cxt.fillRect(200,300,200,10);

				// 起始角度
				var angle = 0;

				// 开始定时器
				setInterval(function(){
					// 清空画布
					cxt.clearRect(0,0,w,h);

					// 保存绘图环境
					cxt.save();	//此时保存的是没有发生改变的绘图环境

					// 位移
					cxt.translate(300,305);

					// 旋转
					cxt.rotate(angle);

					// 填充矩形
					cxt.fillRect(-100,-5,200,10);

					// 释放绘图环境
					cxt.restore();

					angle += Math.PI / 18;	//每次旋转10度
				},50)
			</script>
		</body>

##作业 ###1、 canvas 绘制 折线图 <body> <canvas id="mycanvas"></canvas> <script> // 定义数据 var month = ["0","一","二","三","四","五","六","七","单位(月份)"];

			var shui = [200,400,600,800,1000,"降水量(mm)"];

			var data = [
				{year:"2017年",shui:[800,561,889,156,205,165,900],color:"red"},
				{year:"2016年",shui:[400,521,289,656,905,365,600],color:"green"},
				{year:"2015年",shui:[500,361,489,756,605,865,1000],color:"yellow"},
			]

			var canvas = document.querySelector("#mycanvas");

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

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

			// 画垂直线
			cxt.beginPath()
			cxt.moveTo(100,200);
			cxt.lineTo(100,500);
			cxt.stroke();

			// 画左上角箭头		
			cxt.beginPath()
			cxt.moveTo(90,210);
			cxt.lineTo(100,200);
			cxt.stroke();

			cxt.beginPath()
			cxt.moveTo(110,210);
			cxt.lineTo(100,200);
			cxt.stroke();

			// 画水平线
			cxt.beginPath()
			cxt.moveTo(100,500);
			cxt.lineTo(500,500);
			cxt.stroke();

			// 画右上角箭头		
			cxt.beginPath()
			cxt.moveTo(490,490);
			cxt.lineTo(500,500);
			cxt.stroke();

			cxt.beginPath()
			cxt.moveTo(490,510);
			cxt.lineTo(500,500);
			cxt.stroke();

			// 表格遍历
			// for(var i = 1; i < 7; i++){
			// 	// 画水平的线
			// 	cxt.beginPath();
			// 	cxt.moveTo(100,200 + i*50)
			// 	cxt.lineTo(450,200 + i*50)
			// 	cxt.stroke();

			// 	for(var j = 1;j < 8;j++){
			// 		// 画垂直的线
			// 		cxt.beginPath();
			// 		cxt.moveTo(100 + j*50,250)
			// 		cxt.lineTo(100 + j*50,500)
			// 		cxt.stroke();
			// 	}
			// }

			// 月份循环遍历
			for(var n = 0;n < month.length;n++){
				cxt.textAlign = "center"
				cxt.fillText(month[n],100 + n*50,520);
				cxt.fill()
			}

			// 降水量循环遍历
			for(var n = 0;n < shui.length;n++){
				cxt.textAlign = "end";
				cxt.fillText(shui[n],85,455 - n*50);
				cxt.fill()
			}

			// 数据遍历
			// 设置起始点
			var startY = 500;
			data.forEach(function(item){
				for(var num=0;num<item.shui.length;num ++){
					// console.log(item.shui[num])

					// 绘制圆点
					cxt.beginPath();
					cxt.arc(150 + num*50, 500 - item.shui[num]/4,3,0,Math.PI*2);
					cxt.fillStyle = item.color;
					cxt.fill()

					// 设置结束点
					var endY = 500 - item.shui[num]/4;

					// 绘制折线
					cxt.beginPath();
					cxt.moveTo(100 + num*50,startY);
					cxt.lineTo(100 + (num+1)*50,endY);
					cxt.strokeStyle = item.color;
					cxt.stroke()


				
					if(num == item.shui.length-1){
						// 获取下一条线时,重新定义起始点
						startY = 500
					}else{
						// 定义下一次的起始点
						startY = endY;
					}
					// console.log(startY)
					// console.log(item.shui[num])

					// 写文字(降水量)
					cxt.fillText(item.shui[num],170 + num*50, 490 - item.shui[num]/4);

					// 写文字(年份)
					cxt.fillText(item.year,510, 500 - item.shui[item.shui.length-1]/4);
				}
			})
		</script>
	</body>

###2、canvas 绘制 柱图 <body> <canvas id="mycanvas"></canvas> <script> // 定义数据 var month = ["0","一","二","三","四","五","六","七","单位(月份)"];

			var shui = [200,400,600,800,1000,"降水量(mm)"];

			var data = [
				{year:"2017年",shui:[800,561,889,156,205,165,900],color:"red",number:0},
				{year:"2016年",shui:[400,521,289,656,905,365,600],color:"green",number:1},
				{year:"2015年",shui:[500,361,489,756,605,865,1000],color:"yellow",number:2},
			]

			var canvas = document.querySelector("#mycanvas");

			var w = 700;
			var h = 600;
			canvas.width = w;
			canvas.height = h;
			canvas.style.border = "1px solid #eee";

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

			// 画垂直线
			cxt.beginPath()
			cxt.moveTo(100,200);
			cxt.lineTo(100,500);
			cxt.stroke();

			// 画左上角箭头		
			cxt.beginPath()
			cxt.moveTo(90,210);
			cxt.lineTo(100,200);
			cxt.stroke();

			cxt.beginPath()
			cxt.moveTo(110,210);
			cxt.lineTo(100,200);
			cxt.stroke();

			// 画水平线
			cxt.beginPath()
			cxt.moveTo(100,500);
			cxt.lineTo(580,500);
			cxt.stroke();

			// 画右上角箭头		
			cxt.beginPath()
			cxt.moveTo(570,490);
			cxt.lineTo(580,500);
			cxt.stroke();

			cxt.beginPath()
			cxt.moveTo(570,510);
			cxt.lineTo(580,500);
			cxt.stroke();

			// 月份循环遍历
			for(var n = 0;n < month.length;n++){
				cxt.textAlign = "center"
				cxt.fillText(month[n],100 + n*60,520);
				cxt.fill()
			}

			// 降水量循环遍历
			for(var n = 0;n < shui.length;n++){
				cxt.textAlign = "end";
				cxt.fillText(shui[n],85,455 - n*50);
				cxt.fill()
			}

			// 数据遍历
			// 设置起始点
			// var startH = 500;
			data.forEach(function(item){
				for(var num=0;num < item.shui.length; num ++){
					// 绘制矩形
					cxt.fillStyle = item.color;
					cxt.fill()
					cxt.fillRect(150 + num*60 + item.number * 10, 500 - item.shui[num]/4,10,500-(500 - item.shui[num]/4));

					// 写字(降水量)
					cxt.fillText(item.shui[num],160 + num*60 + item.number * 10, 495 - item.shui[num]/4)
					
					// 绘制小矩形
					cxt.fillRect(150,150 + item.number * 20,10,10);
					
					// 写字(年份)
					cxt.fillText(item.year,210,160 + item.number * 20);
				}
			})
		</script>
	</body>

###3、动画(键盘事件,实现任务移动) <body> <canvas id="mycanvas"></canvas> <br> <div id="btn-list"> <button data-dir="1">←</button> <button data-dir="3">↑</button> <button data-dir="0">↓</button> <button data-dir="2">→</button> </div> <script> var canvas = document.querySelector("#mycanvas");

			var w = 400;
			var h = 400;
			canvas.width = w;
			canvas.height = h;
			canvas.style.border = "1px solid #eee";

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

			// 设置相关变量

			// 时间间隔
			var time = 200;

			// 人物宽度
			var renW = 50;

			// 人物高度
			var renH = 70;

			// 前进方向
			var direction = 0;

			// 循环变量
			var i = 0;

			// 定义y轴
			var X = 100;
			// 定义y轴
			var Y = 100;

			// 绘制图片
			var img = document.createElement("img");
			img.src="./p.png";

			img.addEventListener("load",function(){
				// 设置定时器
				setInterval(function(){
					// 清空画布
					cxt.clearRect(0,0,w,h);

					// 裁剪图片
					cxt.drawImage(img,i * renW, direction * renH, renW, renH, X, Y, renW, renH);

					i ++ ;

					// 每4次一个循环
					i %= 4;
				},time)
			})

			document.onkeydown = function(en){
				var e = en || window.event;
				// console.log(e.keyCode);

				switch(e.keyCode){
					case 38: 	//上
						direction = 3;
						if(Y > 0){
							Y -= 2;
						}					
					break;

					case 40: 	//下
						direction = 0;
						if(Y <= h - renH){
							Y += 2;
						}
					break;

					case 37: 	//左
						direction = 1;
						if(X > 0){
							X -= 2;
						}	
					break;

					case 39: 	//右
						direction = 2;
						if(X <= w - renW){
							X += 2;
						}
					break;

					default:
						return;
					break;
				}
			}

			// 获取button
			var btnList = document.querySelectorAll("#btn-list button");
			for (var i = 0; i < btnList.length; i ++) {
				(function(num){
					btnList[num].onclick = function(){
						direction = this.dataset.dir;

						//上
						if(direction == 3){
							if(Y > 0){
								Y -= 2;
							}
						}
						//下
						if(direction == 0){
							if(Y <= h - renH){
								Y += 2;
							}
						}
						//左
						if(direction == 1){
							if(X > 0){
								X -= 2;
							}
						}
						//右
						if(direction == 2){
							if(X <= w - renW){
								X += 2;
							}
						}

						// switch(num){
						// 	case 0: 	//向左
						// 		if(X > 0){
						// 			X -= 2;
						// 		}
						// 	break;
						// 	case 1: 	//向上
						// 		if(Y > 0){
						// 			Y -= 2;
						// 		}
						// 	break; 
						// 	case 2: 	//向下
						// 		if(Y <= h - renH){
						// 			Y += 2;
						// 		}
						// 	break;
						// 	case 3: 	//向右
						// 		if(X <= w - renW){
						// 			X += 2;
						// 		}
						// 	break;
						// }
					}	
				})(i)			
			}
		</script>
	</body>

###4、实现钟表效果 <head> <meta charset="UTF-8"> <title>钟表</title> <style> canvas{ position:absolute; left:10; top:10; } </style> </head> <body> <canvas id="dial_canvas">表盘</canvas> <canvas id="hand_canvas">指针</canvas>

		<script>
			// 设置宽高、半径
			var w = 600,h = 600;
			var r = 200;

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

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

			// 设置 表盘 画布大小
			dial_canvas.width = w;
			dial_canvas.height = h;

			// 设置 指针 画布大小
			hand_canvas.width = w;
			hand_canvas.height = h;

			// 设置 表盘 绘图环境
			var dial_ctx = dial_canvas.getContext("2d");

			// 设置 指针 绘图环境
			var hand_ctx = hand_canvas.getContext("2d");

			// 绘制表盘
			dial_ctx.beginPath();
			dial_ctx.arc(w/2,h/2,r,0,Math.PI*2);
			dial_ctx.lineWidth = 10;
			dial_ctx.stroke();

			// 绘制 小时 刻度(大刻度)
			drawScale(dial_ctx,w/2,h/2,r,r-20,12,10);

			// 绘制 分钟 刻度(小刻度)
			drawScale(dial_ctx,w/2,h/2,r,r-10,60,2);

			// 绘制刻度
			/*
			* [@param](https://my.oschina.net/u/2303379) Object ctx 绘图环境
			* [@param](https://my.oschina.net/u/2303379) Number x 圆心x坐标
			* [@param](https://my.oschina.net/u/2303379) Number y 圆心y坐标
			* [@param](https://my.oschina.net/u/2303379) Number innerRadius 内圆的半径 
			* [@param](https://my.oschina.net/u/2303379) Number outerRadius 外圆的半径 
			* @param Int number 刻度的个数
			* @param Number lineWidth 刻度的宽度
			* @param String strokeStyle 刻度的颜色
			*/
			function drawScale(ctx,x,y,innerRadius,outerRadius,number,lineWidth,strokeStyle){
				var angle = 0;

				//间隔的度数
				var angleDiff = 360 / number;

				for(var i = 0;i<number;i++){
					// 起始坐标
					var x1 = Math.cos(angle / 180 * Math.PI) * outerRadius + w/2;
					var y1 = Math.sin(angle / 180 * Math.PI) * outerRadius + h/2;

					// 结束坐标
					var x2 = Math.cos(angle / 180 * Math.PI) * innerRadius + w/2;
					var y2 = Math.sin(angle / 180 * Math.PI) * innerRadius + h/2;

					// 绘制刻度
					ctx.beginPath();
					ctx.moveTo(x1,y1);
					ctx.lineTo(x2,y2);

					ctx.lineWidth = lineWidth;
					ctx.strokeStyle = strokeStyle;
					ctx.stroke();

					// 定义下一次的角度
					angle += angleDiff;
				}
			}

			// 定时绘制指针
			function run(){
				// 获取时间
				var date = new Date();

				// 清空画布
				hand_ctx.clearRect(0,0,w,h);

				// 获取秒
				var seconds = date.getSeconds();
				drawHand(hand_ctx,w/2,h/2,seconds / 60 * 360,180,2,"red");

				// 获取分针
				var mintues = date.getMinutes() + seconds / 60;
				drawHand(hand_ctx,w/2,h/2,mintues / 60 * 360,150,5,"#000");

				//时针
				var hours = date.getHours() % 12 + mintues / 60;
				drawHand(hand_ctx, w/2, h/2, hours / 12 * 360, 120, 8, "#000");

				setTimeout(run, 1000);
			}
			run();

			/**
	         * 绘制指针
	         * @param Object cxt 绘图环境
	         * @param Number x 表中心的x坐标
	         * @param Number y 表中心的y坐标
	         * @param Number angle 指针旋转的角度
	         * @param Number length 指针长度
	         * @param Number lineWidth 指针宽度
	         * @param String strokeStyle 指针颜色
			*/
			function drawHand(ctx,x,y,angle,length,lineWidth,strokeStyle){
				// 保存环境
				ctx.save()

				ctx.beginPath();

				ctx.translate(x,y);
				ctx.rotate((angle - 90)/180 * Math.PI);

				ctx.moveTo(-20,0);
				ctx.lineTo(length,0);

				ctx.lineWidth = lineWidth;
				ctx.strokeStyle = strokeStyle;
				ctx.stroke();

				// 恢复环境
				ctx.restore()
			}
		</script>
	</body>

© 著作权归作者所有

上一篇: canvas-03
下一篇: Canvas01
wei0925
粉丝 2
博文 15
码字总数 17278
作品 0
温州
程序员
私信 提问
加载中

评论(1)

我最洋气
博主,我现在有一个转盘的项目,为了提高用户体验,在前面要加上未点击的情况下旋转,如何实现,方便说下吗,谢谢
wpf 窗体之间传递控件-01(未完)

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

温暖的小明
2016/09/23
78
0
canvas 合并图片,贴二维码

本次需求要求:海报图固定,内置二维码动态 实现原理 canvas的drawImage()方法先后画出海报图、二维码 利用canvas的toDataURL()方法获取base64地址并在文档添加img节点 图片跨域问题(给元素添...

littleFaye
2018/07/18
102
0
WPF 打印实例

在WPF 中可以通过PrintDialog 类方便的实现应用程序打印功能,本文将使用一个简单实例进行演示。首先在VS中编辑一个图形(如下图所示)。 将需要打印的内容放入同一个 中,并起名为“printAr...

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

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

楚广明
2012/08/25
0
0
CreateJS结合Falsh工具生成Canvas动画(加密字符串的由来)

CreateJS是一款制作Canvas动画的工具。 官网如下: http://www.createjs.com/ http://www.createjs.cc/ 使用CreateJS时最大的疑问就是JS上的加密字符串是如何来的,比如: 其实这个加密字符串...

easonjim
2017/04/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

thinkcmf 渗透测试漏洞修复解决方案

近段时间发现很多APP程序用的是thinkcmf,此程序源码存在getshell漏洞,我们Sine安全紧急对此高危漏洞进行了分析和漏洞修复,攻击者可以通过构造特定的请求包get请求即可在远程服务器上执行任意...

网站安全
31分钟前
6
0
MySQL的IP地址与数字互转原理

一、inet_aton与inet_ntoa inet_aton是把ip地址转为数字的函数,记忆小技巧,inet表示网络相关,在c语言中a习惯性代表字符串,to就是转换的,n代表数字,aton就是字符串转数字,同理inet_nt...

trayvon
42分钟前
6
0
【翻译】全新16英寸MacBook Pro评测:开发人员的梦想成真

要问现在适合开发者用的笔记本,市面上还是有很多选择的,比如Dell的XPS系列,外星人系列(游戏也是杠杠滴),联想拯救者系列,还有形形色色的高配机型,价格也从几千到几万不等。 但是,笔吧...

Dimple91
44分钟前
8
0
IT兄弟连 HTML5教程 CSS3属性特效 CSS3分栏布局

CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道,当一行文字太长时,读者读起来就比较费劲...

老码农的一亩三分地
今天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部