编程 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去掉A标签（链接）虚线框的方法

Apr 01 HTML / CSS

CSS3中的clip-path使用攻略

Aug 03 HTML / CSS

CSS3实现超酷的黑猫警长首页

Apr 26 HTML / CSS

CSS3的column-fill属性对齐列内容高度的用法详解

Jul 01 HTML / CSS

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

Jan 12 HTML / CSS

HTML5应用之文件上传

Dec 30 HTML / CSS

html5新增的属性和废除的属性简要概述

Feb 20 HTML / CSS

HTML5拖放API实现拖放排序的实例代码

May 11 HTML / CSS

有关HTML5中背景音乐的自动播放功能

Oct 16 HTML / CSS

CSS代码检查工具stylelint的使用方法详解

Mar 27 HTML / CSS

通过feDisplacementMap和feImage实现水波特效

Apr 24 HTML / CSS

CSS元素定位之通过元素的标签或者元素的id、class属性定位详解

Sep 23 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的ob_start();控制您的浏览器cache!

2007/02/14 PHP

php_screw 1.5:php加密: 安装与使用详解

2013/06/20 PHP

基于php实现七牛抓取远程图片

2015/12/01 PHP

php生成txt文件实例代码介绍

2016/04/28 PHP

php多文件打包下载的实例代码

2017/07/12 PHP

JavaScript DOM学习第一章 W3C DOM简介

2010/02/19 Javascript

Nodejs为什么选择javascript为载体语言

2015/01/13 NodeJs

jQuery CSS3自定义美化Checkbox实现代码

2016/05/12 Javascript

JS仿hao123导航页面图片轮播效果

2016/09/01 Javascript

微信小程序网络API 上传、下载详解

2016/11/09 Javascript

jQuery插件fullPage.js实现全屏滚动效果

2016/12/02 Javascript

简单实现IONIC购物车功能

2017/01/10 Javascript

JavaScript数组操作详解

2017/02/04 Javascript

Javasript设计模式之链式调用详解

2018/04/26 Javascript

JavaScript实现的DOM绘制柱状图效果示例

2018/08/08 Javascript

浅谈Vue组件及组件的注册方法

2018/08/24 Javascript

详解一些适用于Node.js的命名约定

2019/12/08 Javascript

react实现复选框全选和反选组件效果

2020/08/25 Javascript

[06:04]DOTA2国际邀请赛纪录片：Just For LGD

2013/08/11 DOTA

Python时间戳与时间字符串互相转换实例代码

2013/11/28 Python

python中的编码知识整理汇总

2016/01/26 Python

python 统计代码行数简单实例

2017/05/04 Python

详解Python 序列化Serialize 和反序列化Deserialize

2017/08/20 Python

Python中列表与元组的乘法操作示例

2018/02/10 Python

一行代码让 Python 的运行速度提高100倍

2018/10/08 Python

详解如何为eclipse安装合适版本的python插件pydev

2018/11/04 Python

解决python中画图时x,y轴名称出现中文乱码的问题

2019/01/29 Python

在python里从协程返回一个值的示例

2019/02/19 Python

Pytorch 实现权重初始化

2019/12/31 Python

jupyter notebook 的工作空间设置操作

2020/04/20 Python

利用 Canvas实现绘画一个未闭合的带进度条的圆环

2019/07/26 HTML / CSS

Calzedonia美国官网：意大利风格袜子、打底裤和沙滩装

2018/07/19 全球购物

匡威英国官网：Converse英国

2018/12/02 全球购物

人力资源管理专业应届生求职信

2013/09/28 职场文书

车间组长岗位职责

2013/12/20 职场文书

Golang jwt身份认证

2022/04/20 Golang