2.使用canvas实现简单的画直线橡皮筋式画框

css样式基本和之前的一样，这里就不提了，

HTML代码：

<div id='controls'>
Stroke color:
<select id="strokeStyleSelect">
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
<option value="orange">orange</option>
<option value="cornflowerblue" selected>cornflowerblue</option>
<option value = 'navy'>navy</option>
<option value = 'purple'>purple</option>
</select>
<input id = 'guidewireCheckbox' type = 'checkbox'/>
<input id = 'eraseAllButton' type = 'button' value = 'Erase all'/>
</div>
<canvas id="canvas" width="500" height="500">
你的浏览器不支持canvas
</canvas>JS代码：
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
eraseAllButton = document.getElementById('eraseAllButton'),
strokeStyleSelect = document.getElementById('strokeStyleSelect'),
guidewireCheckbox = document.getElementById('guidewireCheckbox'),
drawingSurfaceImageData,
mousedown = {},
rubberbandRect = {},
dragging = false,
guidewires = guidewireCheckbox.checked;
function drawGrid(color,stepx,stepy){//画网格线，可要可不要
context.strokeStyle = color;
context.lineWidth = 0.5;
for(var i = stepx + 0.5;i < canvas.width;i += stepx){
context.beginPath();
context.moveTo(i , 0);
context.lineTo(i , canvas.height);
context.stroke();
}
for(var i = stepy + 0.5;i < canvas.height;i += stepy){
context.beginPath();
context.moveTo(0 , i);
context.lineTo(canvas.width , i);
context.stroke();
}
}
function windowToCanvas(x , y){
var bbox = canvas.getBoundingClientRect();
return {x : x - bbox.left * (canvas.width / bbox.width) ,
y : y - bbox.top * (canvas.height / bbox.height)};
}
function saveDrawingSurface(){
drawingSurfaceImageData = context.getImageData(0 , 0 ,
canvas.width , canvas.height);
}
function restoreDrawingSurface(){
context.putImageData(drawingSurfaceImageData , 0 , 0);
}
function updateRubberbandRectangle(loc){
rubberbandRect.width = Math.abs(loc.x - mousedown.x);
rubberbandRect.height = Math.abs(loc.y - mousedown.y);
if(loc.x > mousedown.x) rubberbandRect.left = mousedown.x;
else rubberbandRect.left = loc.x;
if(loc.y > mousedown.y) rubberbandRect.top = mousedown.y;
else rubberbandRect.top = loc.y;
}
function drawRubberbandShape(loc){
context.beginPath();
context.moveTo(mousedown.x , mousedown.y);
context.lineTo(loc.x , loc.y);
context.stroke();
}
function updateRubberband(loc){
updateRubberbandRectangle(loc);
drawRubberbandShape(loc);
}
function drawHorizontalLine(y){
context.beginPath();
context.moveTo(0 , y + 0.5 );
context.lineTo(canvas.width , y + 0.5);
context.stroke();
}
function drawVerticalLine(x){
context.beginPath();
context.moveTo(x + 0.5 , 0);
context.lineTo(x + 0.5 , canvas.height);
context.stroke();
}
function drawGuidewires(x , y){
context.save();
context.strokeStyle = 'rgba(0,0,230,0.4)';
context.lineWidth = 0.5;
drawVerticalLine(x);
drawHorizontalLine(y);
context.restore();
}
canvas.onmousedown = function (e){
var loc = windowToCanvas(e.clientX , e.clientY);
e.preventDefault();
saveDrawingSurface();
mousedown.x = loc.x;
mousedown.y = loc.y;
dragging = true;
};

canvas.onmousemove = function (e){
var loc;
if(dragging){
e.preventDefault();
loc = windowToCanvas(e.clientX , e.clientY);
restoreDrawingSurface();
updateRubberband(loc);
if(guidewires){
drawGuidewires(loc.x , loc.y);
}
}
};
canvas.onmouseup = function (e){
loc = windowToCanvas(e.clientX , e.clientY);
restoreDrawingSurface();
updateRubberband(loc);
dragging = false;
}
eraseAllButton.onclick = function (e){
context.clearRect(0 , 0 , canvas.width , canvas.height);
// drawGrid('lightgray' , 10 , 10);
context.strokeStyle = strokeStyleSelect.value;
saveDrawingSurface();
};
strokeStyleSelect.onchange = function (e){
context.strokeStyle = strokeStyleSelect.value;
}
guidewireCheckbox.onchange = function (e){
guidewires = guidewireCheckbox.checked;
}
context.strokeStyle = strokeStyleSelect.value;之后还会上传关于多边形绘画。