<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title></title>

		<link rel="stylesheet" type="text/css" href="css/main.css"/>

	</head>

	<body>

		<div class="container">

			<p id="message"></p>

			<div class="cvs-wrap">

				<canvas id="cvs" width="600" height="400"></canvas>

			</div>

			<div class="pencolor" id="pencolor">

				<ul>

					<li style="background: #000000;">黑</li>

					<li style="background: #ffffff;">白</li>

					<li style="background: #FF0000;">红</li>

					<li style="background: #FF8C00;">橙</li>

					<li style="background: #EEEE00;">黄</li>

					<li style="background: #7FFF00;">绿</li>

					<li style="background: #0000AA;">蓝</li>

					<li style="background: #00EE76;">青</li>

					<li style="background: #8B4789;">紫</li>

					<li onclick="clearimg()">清除</li>

				</ul>

			</div>

			<div class="pensize" id="pensize">

				<ul>

					<li style="font-size: 1px;">1</li>

					<li style="font-size: 2px;">2</li>

					<li style="font-size: 3px;">3</li>

					<li style="font-size: 4px;">4</li>

					<li style="font-size: 5px;">5</li>

					<li style="font-size: 6px;">6</li>

					<li style="font-size: 7px;">7</li>

					<li style="font-size: 8px;">8</li>

					<li style="font-size: 9px;">9</li>

					<li style="font-size: 16px;">保存</li>

				</ul>

			</div>

		</div>

		<script type="text/javascript" src="js/main.js"></script>

	</body>

</html>

　　

*{margin: 0;padding: 0;}

.container{width: 600px; height: 502px; margin: 0 auto;border: 1px solid #ff0000;}

.cvs-wrap{width: 600px;height: 400px;}

.pencolor{width: 600px;height: 50px;border-top: 1px solid #e7e7e7;}

.pensize{width: 600px;height: 50px;border-top: 1px solid #e7e7e7;}

.pencolor li,.pensize li{float: left;list-style: none; width: 60px;height: 50px;text-align: center;line-height: 50px; display: block;}

　　

window.onload = function() {

	var active = false;

	//	console.log(pencolor) ;

	//	console.log(pensize) ;

	var canvas = document.getElementById("cvs");

	var pencolor = document.getElementById('pencolor').getElementsByTagName('li');

	var pensize = document.getElementById('pensize').getElementsByTagName('li');

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

	canvas.onmousedown = function(event) {

		active = true;

		//获取x

		x = event.clientX - canvas.offsetLeft;

		//获取y

		y = event.clientY - canvas.offsetTop;

		//		console.log(x, y);

	}

	canvas.onmousemove = function(event) {

		if(active == true) {

			//获取x

			x2 = event.clientX - canvas.offsetLeft;

			//获取y

			y2 = event.clientY - canvas.offsetTop;

			console.log(x2, y2, active);

			cxt.beginPath();

			cxt.moveTo(x, y);

			cxt.lineTo(x2, y2);

			cxt.strokeStyle = color;

			cxt.lineWidth =size;

			cxt.lineCap="round";

			cxt.stroke();

			cxt.closePath();

			x = x2;

			y = y2;

		}

	}

	canvas.onmouseup = function() {

		active = false;

	}

	for(var i = 0; i < pencolor.length; i++) {

		var color="rgb(0,0,0)";

		pencolor[i].onclick = function() {

			//		console.log(pencolor);

			color = this.style.backgroundColor;

			//		console.log(color);

			return color;

			alert(color);

		}

	}

	for(var j = 0; j < pencolor.length; j++) {

		var size="1px";

		pensize[j].onclick = function() {

			//		console.log(pencolor);

			size = this.innerHTML;

			//		console.log(size);

			return size;

			console.log(size);

		}

	}

}

　　

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. 反射在ADO.NET中的运用（你还在每个项目中循环遍历DataTable吗）

    图片有点大哈,但大更能说明问题.您是不是每个项目都在重复的做图片中的事情-----循环把数据库中返回的表转化为实体对象.是不是每次都在抱怨这样的重复工作.字段越多抱怨越多!不用抱怨了.当你看到这篇文章 ...

  2. 【BZOJ 4561】【JLOI 2016】圆的异或并

    http://www.lydsy.com/JudgeOnline/problem.php?id=4561 一开始并不会做,后来看题解看懂了. 看懂了之后还是错了好几次,数组大小手残开小了. 圆的包含并 ...

  3. Asp.Net MVC<七>：Model

    Model 指ViewModel ,其作用: 用于目标Action的参数绑定 用于View呈现 Model元数据则是对ViewModel数据类型的描述,其作用在于控制作为Model的数据对象在View ...

  4. 红米3 Flyme5.1.9.5插桩适配长期不定时更新

    ROM介绍: 2016.9.5更新日志: 1,更新源码到0905 2.修复bug若干. 2016.8.29更新日志: 1,更新源码到0829 2.修复bug若干. 2016.8.22更新日志: 1,更 ...

  5. sql 知识点系统汇总

    提供性能: .服务器往往具有强大的计算能力和速度..避免把大量的数据下载到客户端,减少网络上的传输量. 第一章 T-SQL 语句 1.1数据类型 文本型 -- CHAR 定长型 <=8000字节 ...

  6. ios开发网络知识 TCP,IP,HTTP,SOCKET区别和联系

    TCP,IP,HTTP,SOCKET区别和联系 网络由下往上分为:        对应 物理层-- 数据链路层-- 网络层--                       IP协议 传输层--     ...

  7. CSS 概念 & 作用

    http://www.cnblogs.com/moveofgod/archive/2012/09/18/2691101.html 式样定义   如何显示 HTML内容 通常存储在式样表中 作用 : 解 ...

  8. Burpsuite 重要插件

    1.Gason:Burpsuite-sqlmap插件,该插件可以让burp与sqlmap轻松对接,深度发掘SQL注入漏洞. 2.fuzzdb:fuzzing测试数据库,开源,深度测试SQL注入,xss ...

  9. [Nhibernate]SchemaExport工具的使用（二）——创建表及其约束、存储过程、视图

    目录 写在前面 文档与系列文章 表及其约束 存储过程 视图 总结 写在前面 由于一直在山西出差,有几天没更新博客了.昨晚回到家,将博客园最近三天更新的文章搜集了一下,花费了半天的时间,看了看,有些文章 ...

  10. ActiveMQ结合Spring开发

    ---------------------------------------------------------------------------- Spring结合ActiveMQ开发 : 发送 ...