编程 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 相关文章推荐

纯CSS3实现Material Design效果

Mar 09 HTML / CSS

css3 给背景设置渐变色的方法

Sep 12 HTML / CSS

25个CSS3动画按钮和菜单教程分享

Oct 03 HTML / CSS

在css3中background-clip属性与background-origin属性的用法介绍

Nov 13 HTML / CSS

CSS3制作苹果风格键盘特效

Feb 26 HTML / CSS

CSS3 Flex 弹性布局实例代码详解

Nov 01 HTML / CSS

CSS3解析抖音LOGO制作的方法步骤

Apr 11 HTML / CSS

CSS3.0实现霓虹灯按钮动画特效的示例代码

Jan 12 HTML / CSS

编写html5时调试发现脚本php等网页js、css等失效

Dec 31 HTML / CSS

HTML5里的placeholder属性使用实例和美化显示效果的方法

Apr 23 HTML / CSS

Data URI scheme详解和使用实例及图片base64编码实现方法

May 08 HTML / CSS

canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)

Jan 10 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

重料打造自己的“宝马”---第三代

2021/03/02 无线电

印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程

2021/03/03 冲泡冲煮

js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析

2013/07/18 PHP

基于laravel制作APP接口（API）

2016/03/15 PHP

Yii2框架RESTful API 格式化响应，授权认证和速率限制三部分详解

2016/11/10 PHP

magento后台无法登录解决办法的两种方法

2016/12/09 PHP

PHP数组基本用法与知识点总结

2020/06/02 PHP

基于PHP实现邮箱验证激活过程详解

2020/10/28 PHP

基于jQuery的计算文本框字数的代码

2012/06/06 Javascript

使用documentElement正确取得当前可见区域的大小

2014/07/25 Javascript

js实现仿Windows风格选项卡和按钮效果实例

2015/05/13 Javascript

JavaScript多线程详解

2015/08/12 Javascript

jQuery+css3实现转动的正方形效果(附demo源码下载)

2016/01/27 Javascript

js实现滚动条滚动到某个位置便自动定位某个tr

2021/01/20 Javascript

JavaScript实现选中文字提示新浪微博分享效果

2017/06/15 Javascript

jquery 获取索引值在一定范围的列表方法

2018/01/25 jQuery

JavaScript防止全局变量污染的方法总结

2018/08/02 Javascript

手把手带你封装一个vue component第三方库

2019/02/14 Javascript

通过实例讲解JS如何防抖动

2019/06/15 Javascript

js微信分享接口调用详解

2019/07/23 Javascript

vue 需求 data中的数据之间的调用操作

2020/08/05 Javascript

python通过ssh-powershell监控windows的方法

2015/06/02 Python

Python实现求两个数组交集的方法示例

2019/02/23 Python

Python 通过正则表达式快速获取电影的下载地址

2020/08/17 Python

Python基于callable函数检测对象是否可被调用

2020/10/16 Python

python 中关于pycharm选择运行环境的问题

2020/10/31 Python

python实现PolynomialFeatures多项式的方法

2021/01/06 Python

苏格兰销售女装、男装和童装的连锁店：M&Co

2018/03/16 全球购物

ReVive利维肤美国官网：RéVive Skincare

2018/04/18 全球购物

美津浓巴西官方网站：Mizuno巴西

2019/07/24 全球购物

婚鞋、新娘鞋、礼服鞋、童鞋：Nina Shoes

2019/09/04 全球购物

Wallis官网：英国女装零售商

2020/01/21 全球购物

爱国卫生月实施方案

2014/02/21 职场文书

协议书范本

2014/04/23 职场文书

用Java实现简单计算器功能

2021/07/21 Java/Android

HTML5中的DOCUMENT.VISIBILITYSTATE属性详解

2023/05/07 HTML / CSS