html5新添了一个重要又强大的标签元素<canvas>,该标签真有彻底替换掉flash的尽头，现在很多网页游戏就是用<canvas>完成的，下面代码就是用该标签制作的一个画板。

效果图：

<!DOCTYPE HTML>

<html>

<head>

	<meta charset="utf-8"/>

<style>

#canvas{cursor:crosshair;}

#red{background:red; width:30px;height: 27px}

#blue{background:blue; width:30px;height: 27px}

#yellow{background:yellow; width:30px;height: 27px}

#white{background:white; width:30px;height: 27px}

#zi{background:#8B026B; width:30px;height: 27px}

</style>

</head>

<body>

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

<br><label>画笔颜色：</label>

<input type="button" id="red" onclick="linecolor='red'">

<input type="button" id="blue" onclick="linecolor='blue'">

<input type="button" id="yellow" onclick="linecolor='yellow'">

<input type="button" id="white" onclick="linecolor='white'">

<input type="button" id="zi" onclick="linecolor='#8B026B'">

<label>画笔宽度：</label>

<select id="sel">

	<option value="4">4</option>

	<option value="8">8</option>

	<option value="16">16</option>

	<option value="30">30</option>

</select>

<input type="button" value="生成图片" onclick="change()"><br>

<img id="image" src="" width="500px" height="200px">

<script type="text/javascript">

function change(){

	document.getElementById("image").src=canvas.toDataURL("image/jpg");

	//window.open("demo.htm", "height=100px, width=400px");

	//alert(document.getElementById("image"));

	}

//下拉画笔宽度

window.onload=function(){

	var huabi=document.getElementById("sel");

	huabi.onchange=function(){

	linw=huabi.value;

	};

	//linw=huabi;

};

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

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

//画一个黑色矩形

ctx.fillStyle="#002200";

ctx.fillRect(0,0,600,400);

//按下标记

var onoff=false;

var oldx=-10;

var oldy=-10;

//设置颜色默认为白色

var linecolor="white";

//宽度默认为4

var linw=4;

//鼠标移动事件，事件绑定

canvas.addEventListener("mousemove",draw,true);

canvas.addEventListener("mousedown",down,false);

canvas.addEventListener("mouseup",up,false);

function down(event){

	onoff=true;

	oldx=event.pageX-10;

	oldy=event.pageY-10;

	}

	function up(){

	onoff=false;

	}

	function draw(event){

	if(onoff==true)

		{

		var newx=event.pageX-10;

		var newy=event.pageY-10;

		ctx.beginPath();

		ctx.moveTo(oldx,oldy);

		ctx.lineTo(newx,newy);

		ctx.strokeStyle=linecolor;

		ctx.lineWidth=linw;

		ctx.lineCap="round";

		ctx.stroke();

		oldx=newx;

		oldy=newy;

		}

	}

</script>

</body>

</html>

js和html5实现画板的更多相关文章

  1. Waud.js – 使用HTML5降级处理的Web音频库

    Waud.js 是一个Web音频库,有一个HTML5音频降级处理方案. 它允许您利用Web音频API为你的Web应用程序控制音频功能.在不支持Web音频API的非现代浏览器使用HTML5音频降级方案. ...

  2. JS开发HTML5游戏《神奇的六边形》（一）

    近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...

  3. Resumable.js – 基于 HTML5 File API 的文件上传

    Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...

  4. JS开发HTML5游戏《神奇的六边形》（二）

    近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...

  5. JS开发HTML5游戏《神奇的六边形》（四）

    近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...

  6. JS开发HTML5游戏《神奇的六边形》（三）

    近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容 ...

  7. jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错

    <!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8&qu ...

  8. 使用 video.js 开发 HTML5 视频页面

    时间 2015-05-13 17:11:58 The GIS Guy 原文  http://thegisguy.tk/html5-video-using-video-js/ 主题 Video.js H ...

  9. js+css3+HTML5拖动滑块(type="range")改变值

    最近在做一个H5的改版项目,产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果,类似如下图这样: 拿到这样的设计稿后,我有点懵了,自己写一个js?去网上找一个这样的效果?自己写一个可以,只是实现 ...

随机推荐

  1. 关于windows的service编程

    最近需要学习下windows的service编程框架,查了下msdn发现不知所云.于是谷歌之,发现了一个非常不错的文章,重点推荐讲的非常详细,深入,看完之后基本上就能很清楚windows的servic ...

  2. C# 开发者代码审查清单【转】

    这是为C#开发者准备的通用性代码审查清单,可以当做开发过程中的参考.这是为了确保在编码过程中,大部分通用编码指导原则都能注意到.对于新手和缺乏经验(0到3年工作经验)的开发者,参考这份清单编码会很帮助 ...

  3. Android Studio开发第四篇版本管理Git（下）

    前面一片介绍了在as下如何关联远程仓库,这篇就介绍在开发过程中怎么应用. 提交+Push 如果本地开发代码有改动了或者你觉得某功能做完了,你打算把改动代码提交到远程仓库,这个时候很简单, 还是在工具栏 ...

  4. DMSFrame 之SqlCacheDependency（二）

    上篇文章介绍的是通知模式的缓存机制,这里介绍的是数据库轮循模式处理,这种模式对SQL2005以下的支持还是比较好的 引擎源码如下: /// <summary> /// 轮循模式 /// 数 ...

  5. 检索 COM 类工厂中 CLSID 为 {13C28AD0-F195-4319-B7D7-A1BDAA329FB8} 的组件时失败，原因是出现以下错误: 80040154

    异常类型:COMException 异常消息:检索 COM 类工厂中 CLSID 为 {13C28AD0-F195-4319-B7D7-A1BDAA329FB8} 的组件时失败,原因是出现以下错误: ...

  6. ubuntu使用

    1主机名修改 在Ubuntu系统中永久修改主机名也比较简单.主机名存放在/etc/hostname文件中,修改主机名时,编辑hostname文件,在文件中输入新的主机名并保存该文件即可.

  7. 基于jQuery点击加载动画按钮特效

    分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  8. ruby -- 进阶学习（一）subdomain配置与实现

    今天和guanMac童鞋研究的subdomain配置终于有点头绪~~ 之所以会遇到种种难题,个人总结了一下,第一本人太菜,第二英语不好 贴一下guanMac童鞋配置小结的链接:http://my.eo ...

  9. [转载]AxureRP 7超强部件库下载

    很多刚刚开始学习Axure的朋友都喜欢到网上搜罗各种部件库(组件库)widgets library ,但是网络中真正实用的并且适合你使用的少之又少,最好的办法就是自己制作适合自己工作内容的部件库. 这 ...

  10. C#语法糖之 cache操作类 asp.net

    因为考虑到我下面我将写session cookies 等 操作类 ,与cache具有共性. 所以都统一继承了IHttpStorageObject  abstract class 来保函数风格的统一 , ...