<! Doctype html> <pead> <title> canvas simple canvas </title> <style type = "text/css"> # can {width: 600px; height: 500px; border: 1px solid # ccc; margin-top: 0px; margin-left: 20px ;} </style> </pead> <body> canvas simple canvas <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 P;} 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, 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> </ptml>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
