编程 HTML / CSS

html5 canvas 简单画板实现代码

Posted in HTML / CSS onJanuary 05, 2012

效果图：
html5 canvas 简单画板实现代码
注：下面的代码运行效果，请在支持html5浏览下执行，才能看到效果。

<!doctype html> <html> <head> <title>canvas简单画板</title> <style type="text/css"> #can{ width:600px; height:500px; border:1px solid #ccc; margin-top:0px; margin-left:20px;} </style> </head> <body> <h2 style="padding-left:20px">canvas简单画板</h2> <canvas id="can" width="600" height="500"></canvas> <script type="text/javascript"> function getBodyOffsetTop(el){ var top = 0; do{ top = top + el.offsetTop; }while(el = el.offsetParent); return top; } function getBodyOffsetLeft(el){ var left = 0; do{ left = left + el.offsetLeft; }while(el = el.offsetParent); return left; } function Drawing(canvas,options){ typeof canvas == 'string' && (canvas = document.getElementById(canvas)); if(!canvas || !canvas.getContext){ throw new Error(100,'do not support canvas!'); } this.option = { colors:['#000000','#ff0000','#00ff00','#0000ff','#00ffff','#7fef02','#4488bb'] }; this.setOption(options); this.init(canvas); } Drawing.prototype = { setOption:function(options){ typeof options == 'object' || (options = {}); for(var i in options){ switch(i){ case 'colors': this.option[i] = options[i]; break; } } }, init:function(canvas){ this.canvas = canvas; this.context = canvas.getContext('2d'); this.context.lineWidth = 1; this.context.lineJons = 'round'; this.context.lineCep = 'round'; this.isButtonDown = false; this.historyStroker = []; this.curStroker = {color:'#000000',path:[]}; this.lastX = 0; this.lastY = 0; this.curColor = '#000000'; this.toolbarspos ={}; this.bindEvent(); this.ResetDrawToolbar(); }, bindEvent:function(){ var self = this; this.canvas.addEventListener('mousemove',function(event){ var x = event.pageX-getBodyOffsetLeft(this), y = event.pageY-getBodyOffsetTop(this); self.onMouseMove({x:x,y:y}); },false); this.canvas.addEventListener('mousedown',function(event){ var x = event.pageX-getBodyOffsetLeft(this), y = event.pageY-getBodyOffsetTop(this); self.onMouseDown(event,{x:x,y:y}); },false); this.canvas.addEventListener('mouseup',function(event){ var x = event.pageX-getBodyOffsetLeft(this), y = event.pageY-getBodyOffsetTop(this); self.onMouseUp(event,{x:x,y:y}); },false); this.canvas.addEventListener('click',function(event){ var x = event.pageX-getBodyOffsetLeft(this), y = event.pageY-getBodyOffsetTop(this); self.onClick({x:x,y:y}); },false); }, onMouseMove:function(pos){ if(this.isButtonDown){ var p = this.toolbarspos; for(var i in p){ if(pos.x >= p[i].x && pos.x <= p[i].x+p[i].w && pos.y >= p[i].y && pos.y <= p[i].y+p[i].h){ return; } } this.context.lineTo(pos.x,pos.y); this.context.stroke(); this.lastX = pos.x; this.lastY = pos.y; this.curStroker.path.push(pos); } }, onMouseDown:function(event,pos){ if(event.button == 0){ var p = this.toolbarspos; for(var i in p){ if(pos.x >= p[i].x && pos.x <= p[i].x+p[i].w && pos.y >= p[i].y && pos.y <= p[i].y+p[i].h){ return; } } this.isButtonDown = true; this.lastX = pos.x; this.lastY = pos.y; this.context.beginPath(); this.context.moveTo(this.lastX,this.lastY); this.curStroker.color = this.curColor; this.curStroker.path.push(pos); } }, onMouseUp:function(event,pos){ if(event.button == 0){ var p = this.toolbarspos; for(var i in p){ if(pos.x >= p[i].x && pos.x <= p[i].x+p[i].w && pos.y >= p[i].y && pos.y <= p[i].y+p[i].h){ return; } } this.isButtonDown = false; this.historyStroker.push(this.curStroker); this.curStroker = {color:this.curColor,path:[]}; } }, ResetDrawAll:function(){ this.context.clearRect(0,0,500,500); this.ResetDrawCentre(); this.ResetDrawToolbar(); }, ResetDrawCentre:function(){ var p = this.historyStroker,p2, curColor = this.context.strokeStyle; for(var i=0; i< p.length;i++){ this.context.strokeStyle = p[i].color; this.context.beginPath(); for(var t=0; t<p[i].path.length;t++){ p2 = p[i].path[t]; if(t==0) this.context.moveTo(p2.x,p2.y); this.context.lineTo(p2.x,p2.y); this.context.stroke(); } this.context.beginPath(); } this.context.strokeStyle = curColor; }, ResetDrawToolbar:function(){ var curcolor = this.context.fillStyle; for(var i=0; i<this.option.colors.length;i++){ this.context.fillStyle = this.option.colors[i]; if(this.curColor == this.context.fillStyle){ this.context.fillRect(i*35+5,2,30,20); this.toolbarspos[i] ={x:i*35+5,y:2,w:30,h:20}; }else{ this.context.fillRect(i*35+5,5,30,20); this.toolbarspos[i] = {x:i*35+5,y:5,w:30,h:20}; } this.context.stroke(); } this.context.fillStyle = curcolor; }, onClick:function(pos){ var p = this.toolbarspos; for(var i in p){ if(pos.x >= p[i].x && pos.x <= p[i].x+p[i].w && pos.y >= p[i].y && pos.y <= p[i].y+p[i].h){ this.curColor = this.option.colors[i]; this.context.strokeStyle = this.curColor; this.ResetDrawAll(); } } } }; new Drawing('can'); </script></body> </html>

提示：您可以先修改部分代码再运行

html5 canvas 简单画板实现代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐

今天学到的CSS最新技术(与图片背景相关)

Dec 24 HTML / CSS

CSS3之背景尺寸Background-size使用介绍

Oct 14 HTML / CSS

css3实现3D色子翻转特效

Dec 23 HTML / CSS

CSS3的 fit-content实现水平居中

Sep 07 HTML / CSS

css3一个简易的 LED 数字时钟实现方法

Jan 15 HTML / CSS

html特殊符号示例 html特殊字符编码对照表

Jan 14 HTML / CSS

让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)

Apr 08 HTML / CSS

HTML5资源预加载(Link prefetch)详细介绍（给你的网页加速）

May 07 HTML / CSS

【HTML5】Canvas绘制简单图片教程

May 13 HTML / CSS

html5 Canvas实现图片旋转的示例

Jan 15 HTML / CSS

HTML5适合的情人节礼物有纪念日期功能

Jan 25 HTML / CSS

html+css实现环绕倒影加载特效

Jul 07 HTML / CSS

整理的15个非常有用的 HTML5 开发教程和速查手册

Oct 18 #HTML / CSS

HTML5 实战PHP之Web页面表单设计

Oct 09 #HTML / CSS

HTML5标签小集

Aug 02 #HTML / CSS

HTML5的革新结构之美

Jun 20 #HTML / CSS

HTML5 声明兼容IE的写法

May 16 #HTML / CSS

基于HTML5 audio元素播放声音jQuery小插件

May 11 #HTML / CSS

20佳惊艳的HTML5应用程序示例分享

May 03 #HTML / CSS

You might like

php自动识别文字编码并转换为目标编码的方法

2015/08/08 PHP

使用PHPMailer发送邮件实例

2017/02/15 PHP

Yii2框架控制器、路由、Url生成操作示例

2019/05/27 PHP

对YUI扩展的Gird组件 Part-1

2007/03/10 Javascript

javascript据option的value值快速设定初始的selected选项

2007/08/13 Javascript

JavaScript OOP类与继承

2009/11/15 Javascript

基于jQuery的可用于选项卡及幻灯的切换插件

2011/03/28 Javascript

javascript实现跳转菜单的具体方法

2013/07/05 Javascript

js的alert样式如何更改如背景颜色

2014/01/22 Javascript

自写的jQuery异步加载数据添加事件

2014/05/15 Javascript

原生js编写设为首页兼容ie、火狐和谷歌

2014/06/05 Javascript

jquery实现焦点图片随机切换效果的方法

2015/03/12 Javascript

javascript针对不确定函数的执行方法

2015/12/16 Javascript

JavaScript计算值然后把值嵌入到html中的实现方法

2016/10/29 Javascript

简单谈谈Javascript函数中的arguments

2017/02/09 Javascript

js省市区级联查询（插件版&无插件版）

2017/03/21 Javascript

Angular2平滑升级到Angular4的步骤详解

2017/03/29 Javascript

nodejs个人博客开发第二步入口文件

2017/04/12 NodeJs

vue解决跨域路由冲突问题思路解析

2017/11/03 Javascript

layui动态渲染生成select的option值方法

2019/09/23 Javascript

python/Matplotlib绘制复变函数图像教程

2019/11/21 Python

Python实现RGB与HSI颜色空间的互换方式

2019/11/27 Python

Python yield生成器和return对比代码实例

2020/04/20 Python

Django模板标签{% for %}循环,获取制定条数据实例

2020/05/14 Python

Python基于os.environ从windows获取环境变量

2020/06/09 Python

Tensorflow中k.gradients()和tf.stop_gradient()用法说明

2020/06/10 Python

基于DOM+CSS3实现OrgChart组织结构图插件

2016/03/02 HTML / CSS

澳大利亚女士时装在线：Rockmans

2018/09/26 全球购物

货代行业个人求职简历的自我评价

2013/10/22 职场文书

日语求职信范文

2013/12/17 职场文书

总经理助理的职责

2014/03/14 职场文书

教师一岗双责责任书

2014/04/16 职场文书

求职自我推荐信

2014/06/25 职场文书

写给老师的感谢信

2015/01/20 职场文书

CSS3 菱形拼图实现只旋转div 背景图片不旋转功能

2021/03/30 HTML / CSS

Go 实现英尺和米的简单单位换算方式

2021/04/29 Golang