制作一个画画板，有清屏有橡皮擦有画笔可以换颜色

style样式

  1. <head>
  2. 	<meta charset="UTF-8">
  3. 	<title>画画板</title>
  4. 	<style>
  5. 		body{
  6. 			background-color:#ccc;
  7. 		}
  8. 		.control-bar{
  9. 			vertical-align:top;
  10. 			display:inline-block;
  11. 		}
  12. 	</style>
  13. </head>

html结构

  1. <canvas id="myCanvas"></canvas>
  3. <div class="control-bar">
  4. 	<button id="clearBtn">清屏</button>
  5. 	<button id="penBtn">画笔</button>
  6. 	<input type="color" id="colorBtn">
  7. 	<button id="eraserBtn">橡皮擦</button>
  8. </div>

script

  1. <script>
  2. 	(function(){
  3. 		var w=800;//画画板的宽度
  4. 		var h=600; //画画板的高度
  6. 		//获取相关元素
  7. 		var canvas=document.getElementById("myCanvas");
  8. 		var penBtn=document.getElementById("penBtn");
  9. 		var colorBtn=document.getElementById("colorBtn");
  10. 		var eraserBtn=document.getElementById("eraserBtn");
  11. 		var clearBtn=document.getElementById("clearBtn");
  13. 		//画布大小设置
  14. 		canvas.width=w;
  15. 		canvas.height=h;
  16. 		canvas.style.backgroundColor="#fff";
  17. 		//获取绘图环境
  18. 		var ctx=canvas.getContext("2d");
  19. 		//鼠标按下事件
  20. 		canvas.onmousedown=function(ev){
  21. 			//求鼠标此时坐标
  22. 			var x=ev.clientX-canvas.getBoundingClientRect().left;//getBoundingClientRect用于获取某个元素相对于视窗的位置集合
  23. 			var y=ev.clientY-canvas.getBoundingClientRect().top+32;//32画笔/橡皮擦的宽度用于准确的定位
  25. 			//开启路径 绘制起点
  26. 			ctx.beginPath();
  27. 			ctx.moveTo(x,y);
  29. 			//鼠标移动
  30. 			canvas.onmousemove=function(ev){
  31. 				//求鼠标此时坐标
  32. 				var x=ev.clientX-canvas.getBoundingClientRect().left;
  33. 				var y=ev.clientY-canvas.getBoundingClientRect().top+32;
  34. 				ctx.lineTo(x,y);
  36. 				//绘制
  37. 				ctx.stroke();
  38. 			}
  39. 		}
  40. 		//鼠标抬起
  41. 		canvas.onmouseup=function(){
  42. 			this.onmousemove=function(){}
  43. 		}
  44. 		setPen();//默认画笔
  45. 		//点击橡皮擦
  46. 		eraserBtn.onclick=setEraser;
  47. 		//点击画笔
  48. 		penBtn.onclick=setPen;
  49. 		//点击颜色选择
  50. 		colorBtn.onchange=setPen;
  51. 		//点击清屏
  52. 		clearBtn.onclick=function(){
  53. 			//ctx.clearRect(0,0,w,h)//和下面两种变法任选其一
  54. 			canvas.width=canvas.width;
  55. 			//重新设置画布的宽度，可以清除屏幕
  56. 			setPen();
  57. 		}
  58. 		//设置为画笔的函数
  59. 		function setPen(){
  60. 			ctx.lineWidth=4;
  61. 			ctx.strokeStyle=colorBtn.value;
  62. 			document.body.style.cursor="url('./images/pen2.ico'),auto";
  63. 		}
  64. 		//设置为橡皮擦的函数
  65. 		function setEraser(){
  66. 			ctx.lineWidth=20;
  67. 			ctx.strokeStyle="#fff";
  68. 			document.body.style.cursor="url('./images/eraser2.ico'),auto";
  69. 		}
  70. 	})()
  72. </script>

制作五角星或者多边形

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>旋转--</title>
  6. 	<style>
  7. 		body{
  8. 			background:#ccc;
  9. 		}
  10. 	</style>
  11. </head>
  12. <body>
  13. 	<canvas id="myCanvas"></canvas>
  14. 	<script>
  15. 		var canvas=document.getElementById("myCanvas");
  16. 		canvas.width=800;
  17. 		canvas.height=600;
  18. 		canvas.style.backgroundColor="#fff";
  19. 		var ctx=canvas.getContext("2d");
  20. 		drawStar(ctx,400,300,40,100);
  21. 		drawStar(ctx,150,150,80,120,"yellow","red",5,12);
  22. 		//声明绘制 五角星的函数
  23. 		function drawStar(ctx,cx,cy,innerRadius,outerRadius,fill="transparent",stroke="#000",strokeWidth=2,numPoints=5){
  24. 			var angle=Math.PI*2/numPoints;//每个角之间的弧度间隔
  25. 			var startAngle=-Math.PI/2;//开始点的弧度
  27. 			ctx.beginPath();
  28. 			for(let i=0;i<numPoints;i++){
  29. 				let x1=cx+outerRadius*Math.cos(startAngle+angle*i);
  30. 				let y1=cy+outerRadius*Math.sin(startAngle+angle*i);
  31. 				ctx.lineTo(x1,y1);
  33. 				let x2=cx+innerRadius*Math.cos(startAngle+angle*i+angle/2);
  34. 				let y2=cy+innerRadius*Math.sin(startAngle+angle*i+angle/2);
  35. 				ctx.lineTo(x2,y2);
  36. 			}
  37. 			ctx.closePath();
  38. 			ctx.fillStyle=fill;
  39. 			ctx.strokeStyle=stroke;
  40. 			ctx.lineWidth=strokeWidth;
  42. 			ctx.stroke();
  43. 			ctx.fill();
  44. 		}
  46. 	</script>
  47. </body>
  48. </html>

canvas制作钟表

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>canvas钟表</title>
  6. 	<style>
  7. 		canvas{
  8. 			position:absolute;
  9. 		}
  10. 	</style>
  11. </head>
  12. <body>
  13. 	<canvas id="dialCanvas"></canvas>
  14. 	<canvas id="handCanvas"></canvas>
  15. 	<script>
  16. 		(function(){
  17. 			//定义相关设置
  18. 			var width=600;
  19. 			var height=600;
  20. 			var dialRadius=200;//表盘半径
  21. 			var cx=width/2;
  22. 			var cy=height/2;
  24. 			//获取canvas
  25. 			var dialCanvas=document.getElementById("dialCanvas");
  26. 			var handCanvas=document.getElementById("handCanvas");
  28. 			//设置画布大小
  29. 			dialCanvas.width=width;
  30. 			dialCanvas.height=height;
  31. 			handCanvas.width=width;
  32. 			handCanvas.height=height;
  34. 			//获取绘图环境
  35. 			var dialCtx=dialCanvas.getContext("2d");
  36. 			var handCtx=handCanvas.getContext("2d");
  38. 			//绘制表盘
  39. 			dialCtx.beginPath();
  40. 			dialCtx.arc(cx,cy,dialRadius,0,2*Math.PI);
  41. 			dialCtx.lineWidth=10;
  42. 			dialCtx.stroke();
  44. 			//绘制小时的刻度
  45. 			drawScale(dialCtx,cx,cy,dialRadius,dialRadius-20,"#000",10,12);
  47. 			//绘制分钟的刻度
  48. 			drawScale(dialCtx,cx,cy,dialRadius,dialRadius-10,"#000",5,60);
  50. 			runTime();
  51. 			//定义定时函数
  52. 			function runTime(){
  53. 				//获取当前时间
  54. 				var date=new Date();
  55. 				var s=date.getSeconds();
  56. 				var m=date.getMinutes()+s/60;
  57. 				var h=date.getHours()+m/60;
  59. 				//清除屏幕
  60. 				handCtx.clearRect(0,0,width,height);
  62. 				//绘制秒针
  63. 				drawHand(handCtx,cx,cy,s/60*Math.PI*2,180,"red",2);
  64. 				//绘制分针
  65. 				drawHand(handCtx,cx,cy,m/60*Math.PI*2,150,"#000",5);
  66. 				//绘制时针
  67. 				drawHand(handCtx,cx,cy,h/12*Math.PI*2,120,"#000",8);
  68. 				setTimeout(runTime,1000);
  70. 				/**
  71. 					* 绘制指针
  72. 					* @params object ctx
  73. 					* @params number cx 表盘圆心坐标
  74. 					* @params number cy表盘圆心坐标
  75. 					* @params number angle 旋转的度数(弧度)
  76. 					* @params number handLength指针长度
  77. 					* @params string stroke指针颜色
  78. 					* @params number strokeWidth 指针粗细度
  79. 				 */
  80. 				function drawHand(ctx,cx,cy,angle,handLength,stroke="#000",strokeWidth=2){
  81. 					ctx.save();
  82. 					ctx.translate(cx,cy);
  83. 					ctx.rotate(angle-Math.PI/2);
  84. 					ctx.beginPath();
  85. 					ctx.moveTo(-20,0);
  86. 					ctx.lineTo(handLength,0);
  87. 					ctx.strokeStyle=stroke;
  88. 					ctx.lineWidth=strokeWidth;
  89. 					ctx.stroke();
  90. 					ctx.restore();
  91. 				}
  93. 				/**
  94. 				 * 绘制刻度的函数
  95. 				 * @param object ctx
  96. 				 * @param number cx 圆心坐标
  97. 				 * @param number cy 圆心坐标
  98. 				 * @param number innerRadius 内半径
  99. 				 * @param number outerRadius 外半径
  100. 				 * @param string stroke 刻度颜色
  101. 				 * @param number strokeWidth 刻度宽度
  102. 				 * @param number numScales 刻度数量
  103. 				 */
  104. 			}
  105. 			function drawScale(ctx,cx,cy,innerRadius,outerRadius,stroke="#000",strokeWidth=2,numScales=12){
  106. 				ctx.beginPath();
  107. 				var angle=0;
  108. 				var changeAngle=Math.PI*2/numScales;
  109. 				for(var i=0;i<numScales;i++){
  110. 					//外圆上的点
  111. 					var x1=cx+outerRadius*Math.cos(angle);
  112. 					var y1=cy+outerRadius*Math.sin(angle);
  113. 					//内圆上的点
  114. 					var x2=cx+innerRadius*Math.cos(angle);
  115. 					var y2=cy+innerRadius*Math.sin(angle);
  116. 					ctx.moveTo(x1,y1);
  117. 					ctx.lineTo(x2,y2);
  118. 					angle+=changeAngle;
  119. 				}
  120. 				ctx.strokeStyle=stroke;
  121. 				ctx.lineWidth=strokeWidth;
  122. 				ctx.stroke();
  123. 			}
  124. 		})()
  125. 	</script>
  126. </body>
  127. </html>

Konva写钟表

  1. 	<!DOCTYPE html>
  2. 	<html lang="en">
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>konva 钟表</title>
  6. 		<style>
  7. 			html{
  8. 				overflow:hidden;
  9. 			}
  10. 			body{
  11. 				margin:0;
  12. 			}
  13. 		</style>
  14. 	</head>
  15. 	<body>
  16. 		<div id="clock"></div>
  17. 		<script src="../konva/konva.min.js"></script>
  18. 		<script>
  20. 			(function(){
  21. 				//创建舞台
  22. 				var stage=new Konva.Stage({
  23. 					width:window.innerWidth,
  24. 					height:window.innerHeight,
  25. 					container:"#clock"
  26. 				});
  27. 				//创建表盘图层
  28. 				var dialLayer=new Konva.Layer({
  30. 				});
  31. 				stage.add(dialLayer);
  32. 				//表盘圆圈
  33. 				var circle=new Konva.Circle({
  34. 					x:stage.getWidth()/2,
  35. 					y:stage.getHeight()/2,
  36. 					radius:200,
  37. 					stroke:"#000",
  38. 					strokeWidth:10
  39. 				});
  40. 				dialLayer.add(circle);
  42. 				//绘制小时刻度
  43. 				var hourScale=new DialScale({
  44. 					x:stage.getWidth()/2,
  45. 					y:stage.getHeight()/2,
  46. 					outerRadius:200,
  47. 					innerRadius:180,
  48. 					strokeWidth:10,
  49. 					stroke:"#000"
  50. 				});
  51. 				dialLayer.add(hourScale);
  53. 				//绘制分钟的坐标
  54. 				var minuteScale=new DialScale({
  55. 					x:stage.getWidth()/2,
  56. 					y:stage.getHeight()/2,
  57. 					outerRadius:200,
  58. 					innerRadius:190,
  59. 					strokeWidth:6,
  60. 					stroke:"#000",
  61. 					numScales:60
  62. 				});
  63. 				dialLayer.add(minuteScale);
  64. 				dialLayer.draw();
  66. 				//创建指针图层
  67. 				var handLayer=new Konva.Layer({
  68. 					x:stage.getWidth()/2,
  69. 					y:stage.getHeight()/2
  70. 				});
  71. 				stage.add(handLayer);
  73. 				//秒钟
  74. 				var secondHand=new Konva.Line({
  75. 					points:[-20,0,180,0],
  76. 					stroke:"red",
  77. 					strokeWidth:2
  78. 				});
  79. 				handLayer.add(secondHand);
  81. 				//分针
  82. 				var minuteHand=new Konva.Line({
  83. 					points:[-20,0,150,0],
  84. 					stroke:"#000",
  85. 					strokeWidth:5
  86. 				});
  87. 				handLayer.add(minuteHand);
  89. 				//时针
  90. 				hourHand=new Konva.Line({
  91. 					points:[-20,0,120,0],
  92. 					stroke:"#000",
  93. 					strokeWidth:8
  94. 				});
  95. 				handLayer.add(hourHand);
  97. 				//小圆圈
  98. 				var smallCircle=new Konva.Circle({
  99. 					x:0,
  100. 					y:0,
  101. 					radius:10,
  102. 					fill:"#000"
  103. 				});
  104. 				handLayer.add(smallCircle);
  105. 				handLayer.draw();
  107. 				runTime();
  108. 				function runTime(){
  109. 					var date=new Date();
  110. 					var s=date.getSeconds();
  111. 					var m=date.getMinutes()+s/60;
  112. 					var h=date.getHours()+m/60;
  114. 					secondHand.rotation(s/60*360-90);
  115. 					minuteHand.rotation(m/60*360-90);
  116. 					hourHand.rotation(h/12*360-90);
  118. 					handLayer.draw();
  119. 					setTimeout(runTime,1000);
  120. 				}
  121. 				// 绘制刻度的构造函数
  122. 				function DialScale(options){
  123. 					options=options ||{};
  124. 					this.x=options.x ||0;
  125. 					this.y=options.y || o;
  126. 					this.innerRadius = options.innerRadius || 0;
  127. 					this.outerRadius = options.outerRadius ||0;
  128. 					this.numScales=options.numScales || 12;
  129. 					this.stroke=options.stroke ||"#000";
  130. 					this.strokeWidth=options.strokeWidth ||2;
  131. 					var group=new Konva.Group({
  132. 						x:this.x,
  133. 						y:this.y
  134. 					});
  136. 					var angle=0;
  137. 					var changeAngle=Math.PI*2/this.numScales;
  138. 					for(var i=0;i<this.numScales;i++){
  139. 						//外圆的点
  140. 						var x1=Math.cos(angle)*this.outerRadius;
  141. 						var y1=Math.sin(angle)*this.outerRadius;
  142. 						//内圆的点
  143. 						var x2=Math.cos(angle)*this.innerRadius;
  144. 						var y2=Math.sin(angle)*this.innerRadius;
  146. 						var line=new Konva.Line({
  147. 							points:[x1,y1,x2,y2],
  148. 							stroke:this.stroke,
  149. 							strokeWidth:this.strokeWidth
  150. 						});
  151. 						group.add(line);
  152. 						angle+=changeAngle;
  153. 					}
  154. 					return group;
  155. 				}
  156. 			})();
  157. 		</script>
  158. 	</body>
  159. 	</html>

canvas画画板,canvas画五角星，canvas制作钟表、Konva写钟表的更多相关文章

  1. Html5新特性 &lt;canvas&gt;画板画直线

     以下样例为用canvas标签画多条直线 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  2. Android利用canvas画画板

    首先新建一个项目工程,建立文件,如下图所示

  3. canvas游戏小试：画一个按方向键移动的圆点

    canvas游戏小试:画一个按方向键移动的圆点   自己对canvas,但又有一颗做游戏的心TT.然后记录一下对canvas的学习吧,用一个按方向键控制的小圆点来做练习.(编程时用了一些es6的语法) ...

  4. 【分享】用Canvas实现画板功能

    前言 PC端测试:QQ浏览器全屏绘画完成.缩小时内容会被清空,切换背景颜色内容会被重置,其他暂无发现: 手机端测试:微信内置浏览器不通过:Safari 浏览器使用画笔时没固定页面会有抖动效果,使用橡皮 ...

  5. canvas小画板——（2）荧光笔效果

    我们在上一篇文章中讲了如何绘制平滑曲线 canvas小画板——(1)平滑曲线. 透明度实现荧光笔 现在我们需要加另外一种画笔效果,带透明度的荧光笔.那可能会觉得绘制画笔的时候加上透明度就可以了.我们来 ...

  6. canvas小画板——（3）笔锋效果

    画线准备 准备一个canvas <canvas id="canvasId" width="1000" height="800"> ...

  7. canvas实现画板

    canvas实现画板 主要用到知识点: 鼠标事件onmousedown() onmousemove() onmouseup() onmouseleave() 事件委托 canvas的一些方法 如:绘制 ...

  8. canvas简易画板

    代码展示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  9. 一款基于HTML5 Canvas的画板涂鸦动画

    今天给各网友分享一款基于HTML5 Canvas的画板涂鸦动画.记得之前我们分享过一款HTML5 Canvas画板工具,可以切换不同的笔刷,功能十分强大.本文今天要再来分享一款基于HTML5 Canv ...

随机推荐

  1. Andorid API Package ---> android.app

    包名: android.app                                     Added in API level 1       URL:http://developer. ...

  2. Oracle 获取 某个表的建表SQL

    获取A表的创表SQL select dbms_metadata.get_ddl('TABLE','A') from dual

  3. 【题解】CF#1012 C-Hill

    感觉这题的状态还是比较明显的.设置状态 \(f[i][j][0/1]\) 表示dp到第 \(i\) 个位置,前面(包括这里)已经出现了 \(j\) 个山峰,当前位置是不是山峰即可 dp.这样的状态有一 ...

  4. BZOJ3534：[SDOI2014]重建——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=3534 https://www.luogu.org/problemnew/show/P3317 T国 ...

  5. BZOJ2458：[BJOI2011]最小三角形——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=2458 Description Xaviera现在遇到了一个有趣的问题. 平面上有N个点,Xavier ...

  6. cf 460 E. Congruence Equation 数学题

    cf 460 E. Congruence Equation 数学题 题意: 给出一个x 计算<=x的满足下列的条件正整数n的个数 \(p是素数,2 ≤ p ≤ 10^{6} + 3, 1 ≤ a ...

  7. STL之四：list用法详解

    转载于:http://blog.csdn.net/longshengguoji/article/details/8520891 list容器介绍 相对于vector容器的连续线性空间,list是一个双 ...

  8. CCPC-Winter Camp div2 day1

    A:机器人 传送门:https://www.zhixincode.com/contest/1/problem/A 题意:地图是由A.B两根线组成的,机器人一开始是在A线上的S点,他初始时可以选择任意方 ...

  9. RotateAnimation 详解

    RotateAnimation 详解 看看新闻网>看引擎>开源产品 其他构造器的旋转也可参考这副图. RotateAnimation旋转坐标系为以旋转点为坐标系(0,0)点.x轴为0度,顺 ...

  10. Mybatis(4) 映射文件-参数处理

    参数处理: 单参数处理: mybatis 不会做任何特殊处理. #{key} : key 可以写任何字段取出参数值. 测试方法: mapper接口: mapper.xml: 控制台: 多参数处理: m ...