1. 简单canvas入门
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript" src="debug_console.js"></script> <script type="text/javascript" src="canvas.js"></script> </head> <body style="margin:0px;padding:0px;overflow:hidden;"> <canvas id="_root_canvas" width=640 height=480 style="margin-left:100px;margin-top:100px;border-style: solid;border-color:#FF0000;border-width:1px;"> Your browser does not support the canvas element. </canvas> </body></html> // disable mouse default right-button menu and left-button select of mouse$(document).bind("contextmenu", function() { return false; });$(document).bind("selectstart", function() { return false; });function pixel(x, y){this.lineWidth = 1;this.moveTo(x, y);this.lineTo(x+1, y+1);this.stroke();}$(document).ready(function(){//var _root_canvas = document.getElementById("_root_canvas");var canvas = $("#_root_canvas").get(0);var cxt = canvas.getContext("2d");var _drag_draw = false; cxt.strokeStyle = "rgba(255, 0, 0, 255)"; cxt.pixel = pixel;/* cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.moveTo(10,10); cxt.lineTo(10,50); cxt.stroke();*/ $('#_root_canvas').mousedown(function() { _drag_draw = true; } ); $('#_root_canvas').mouseup(function() { _drag_draw = false; } ); $('#_root_canvas').mousemove(function(e) { DDD.Debugging.writeLine("_root_canvas mousemove page x is {0}, page y is {1}, offset x {2}, offset y {3}", e.pageX, e.pageY, e.offsetX, e.offsetY);if(_drag_draw) cxt.pixel(e.offsetX, e.offsetY); } );});2. 设置canvas的宽和高
var canvas = document.getElementById("myCanvas");//canvas.style.width = right - left + "px";//canvas.style.height = bottom - top + "px";canvas.setAttribute('width', right - left + "");canvas.setAttribute('height', bottom - top + "");通过设置style的方式是不可以使用的!!!!转载于:https://www.cnblogs.com/linucos/archive/2011/10/27/2226491.html
