1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8" />
  5. 		<title></title>
  6. 		<link rel="stylesheet" type="text/css" href="css/main.css"/>
  7. 	</head>
  8. 	<body>
  9. 		<div class="container">
  10. 			<p id="message"></p>
  11. 			<div class="cvs-wrap">
  12. 				<canvas id="cvs" width="600" height="400"></canvas>
  13. 			</div>
  14. 			<div class="pencolor" id="pencolor">
  15. 				<ul>
  16. 					<li style="background: #000000;">黑</li>
  17. 					<li style="background: #ffffff;">白</li>
  18. 					<li style="background: #FF0000;">红</li>
  19. 					<li style="background: #FF8C00;">橙</li>
  20. 					<li style="background: #EEEE00;">黄</li>
  21. 					<li style="background: #7FFF00;">绿</li>
  22. 					<li style="background: #0000AA;">蓝</li>
  23. 					<li style="background: #00EE76;">青</li>
  24. 					<li style="background: #8B4789;">紫</li>
  25. 					<li onclick="clearimg()">清除</li>
  26. 				</ul>
  27. 			</div>
  28. 			<div class="pensize" id="pensize">
  29. 				<ul>
  30. 					<li style="font-size: 1px;">1</li>
  31. 					<li style="font-size: 2px;">2</li>
  32. 					<li style="font-size: 3px;">3</li>
  33. 					<li style="font-size: 4px;">4</li>
  34. 					<li style="font-size: 5px;">5</li>
  35. 					<li style="font-size: 6px;">6</li>
  36. 					<li style="font-size: 7px;">7</li>
  37. 					<li style="font-size: 8px;">8</li>
  38. 					<li style="font-size: 9px;">9</li>
  39. 					<li style="font-size: 16px;">保存</li>
  40. 				</ul>
  41. 			</div>
  42. 		</div>
  43.  
  44. 		<script type="text/javascript" src="js/main.js"></script>
  45. 	</body>
  46. </html>

　　

  1. *{margin: 0;padding: 0;}
  2. .container{width: 600px; height: 502px; margin: 0 auto;border: 1px solid #ff0000;}
  3. .cvs-wrap{width: 600px;height: 400px;}
  4. .pencolor{width: 600px;height: 50px;border-top: 1px solid #e7e7e7;}
  5. .pensize{width: 600px;height: 50px;border-top: 1px solid #e7e7e7;}
  6. .pencolor li,.pensize li{float: left;list-style: none; width: 60px;height: 50px;text-align: center;line-height: 50px; display: block;}

　　

  1. window.onload = function() {
  2. 	var active = false;
  3. 	//	console.log(pencolor) ;
  4. 	//	console.log(pensize) ;
  5.  
  6. 	var canvas = document.getElementById("cvs");
  7. 	var pencolor = document.getElementById('pencolor').getElementsByTagName('li');
  8. 	var pensize = document.getElementById('pensize').getElementsByTagName('li');
  9. 	var cxt = canvas.getContext("2d");
  10.  
  11. 	canvas.onmousedown = function(event) {
  12. 		active = true;
  13. 		//获取x
  14. 		x = event.clientX - canvas.offsetLeft;
  15. 		//获取y
  16. 		y = event.clientY - canvas.offsetTop;
  17. 		//		console.log(x, y);
  18. 	}
  19. 	canvas.onmousemove = function(event) {
  20. 		if(active == true) {
  21. 			//获取x
  22. 			x2 = event.clientX - canvas.offsetLeft;
  23. 			//获取y
  24. 			y2 = event.clientY - canvas.offsetTop;
  25. 			console.log(x2, y2, active);
  26. 			cxt.beginPath();
  27. 			cxt.moveTo(x, y);
  28. 			cxt.lineTo(x2, y2);
  29. 			cxt.strokeStyle = color;
  30. 			cxt.lineWidth =size;
  31. 			cxt.lineCap="round";
  32. 			cxt.stroke();
  33. 			cxt.closePath();
  34. 			x = x2;
  35. 			y = y2;
  36. 		}
  37. 	}
  38. 	canvas.onmouseup = function() {
  39. 		active = false;
  40. 	}
  41.  
  42. 	for(var i = 0; i < pencolor.length; i++) {
  43. 		var color="rgb(0,0,0)";
  44. 		pencolor[i].onclick = function() {
  45. 			//		console.log(pencolor);
  46. 			color = this.style.backgroundColor;
  47. 			//		console.log(color);
  48. 			return color;
  49. 			alert(color);
  50. 		}
  51.  
  52. 	}
  53.  
  54. 	for(var j = 0; j < pencolor.length; j++) {
  55. 		var size="1px";
  56. 		pensize[j].onclick = function() {
  57. 			//		console.log(pencolor);
  58. 			size = this.innerHTML;
  59. 			//		console.log(size);
  60. 			return size;
  61. 			console.log(size);
  62. 		}
  63. 	}
  64.  
  65. }

　　

canvas 画板的更多相关文章

  1. QML学习笔记（二）-纯qml画图实现canvas画板-鼠标画图

    作者: 狐狸家的鱼 Github: 八至 版权声明:如需转载请获取授权和联系作者 用纯qml实现canvas画板功能,用鼠标进行画图,可以画直线,画圆,画矩形,画弧线. 由于canvas画图会有延迟和 ...

  2. canvas——画板

    注意部分: canvas的height和width不能再css中设定,应该在html中设定,否则会影响页面的分辨率. 效果图: 图1: 代码 css: #canvas{ cursor: crossha ...

  3. 简易的canvas画板

    没事仿照windows画板工具用canvas实现了一个简易版的画板. html: <!doctype html> <html> <head> <meta ch ...

  4. html5 canvas画板

    点击查看演示地址 <!DOCTYPE HTML> <html> <title>HTML5-CanvasDrawDemo</title> <meta ...

  5. html5 canvas 画板

    <!doctype html> <head> <meta http-equiv="Content-Type" content="text/h ...

  6. JS canvas 画板 撤销

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. Canvas画板

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA6QAAAGgCAIAAAAy0z21AAAgAElEQVR4nO3dfYwkZ30n8JqZfcNex8

  8. canvas画板基础应用的学习

    canvas是html5中的绘图容器,我们可以通过javascript的控制来进行图形的绘制,绘制对象可以是路径.盒.圆.字符等,同时,你也可以通过js给画布添加图像,下面来介绍canvas的各种基本 ...

  9. canvas实践小实例一 —— 画板工具

    前面讲了一部分的canvasAPI的基础知识,光看API的介绍确实是很无趣乏味,需要一点可以激发内心的激情的东西来激励自己来学习,于是就了伴随canvasAPI学习的小实例,这样通过API的知识,结合 ...

随机推荐

  1. 方法构造和方法重载之奥特曼与大boss之战

    知识点的总结: 1.类中的方法分为两类:1.普通方法: 2.构造方法. 2.构造方法的格式:  public 类名(数据类型  参数名,...){ } 3.构造方法的用途:  1.实例化对象.  2. ...

  2. CDH安装

    离线安装Cloudera Manager 5和CDH5(最新版5.1.3) 完全教程 关于CDH和Cloudera Manager CDH (Cloudera's Distribution, incl ...

  3. .Net Core Linux centos7行—hyper-v安装linux系统和.net core sdk

    下载linux系统,选择安装centos7 下载地址:https://www.centos.org/download/ 安装centos7 hyper-v选择新建虚拟机 根据向导一路next,虚拟机代 ...

  4. [转]Tomcat启动java.lang.OutOfMemoryError: PermGen space错误解决

    原文地址:http://outofmemory.cn/java/OutOfMemoryError/outofmemoryerror-permgen-space-in-tomcat-with-eclip ...

  5. asp.net mvc4+mysql做一个简单分页组件（部分视图）

    在开始做mysql分页功能组件前,便设定的是要有一定可复用性.先在项目里Views文件夹下右键新建名为_PaginationComponent.cshtml,这里html及css我采用的bootstr ...

  6. noi-openjudge[4.7搜索]怀表问题

    为啥我觉得这是个DP-.f[i][j][k][l]表示四种零件分别用了i,j,k,l个的方案数.然后发现这样不能保证表一定能接在表链首尾,也不知道状态之间如何转移,那么加一维变成f[i][j][k][ ...

  7. java 判断String 是否为空

    StringUtils.isBlank(null) = true StringUtils.isBlank("") = true StringUtils.isBlank(" ...

  8. C#------接口的理解

    转载: http://blog.jobbole.com/85751/

  9. CentOS7下搭建邮件服务器(dovecot + postfix + SSL)

    CentOS   花了基本上两天的时间去配置CentOS7下的邮件服务器.其中艰辛太多了,一定得总结下. 本文的目的在于通过一系列配置,在CentOS 7下搭建dovecot + postfix + ...

  10. 原生JS常用代码汇总

    数组相关 var codes = new Array( ); //创建数组codes.length //数组长度 动态插入数组 codes.push(value);