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的方式是不可以使用的!!!!