java 画笔粗细_javaScript canvas实现(画笔大小 颜色 橡皮的实例)

shape

rectangle

circle

line

var shap = 99; //0 is circle; 1 is rectangle

var orignalX, orignalY;//the coordinate of mouse down

var lastX, lastY;//the coordinate of last mouse position

var isMouseDown = false; // flag of mouse pressing down

var myCanvas = document.getElementById("myCanvas");

var context = myCanvas.getContext('2d');

var width = myCanvas.width, height = myCanvas.height;

var data;//storing last canvas' content

context.strokeStyle = "black";

context.strokeWidth=1;

context.lineWidth = 1;

document.getElementById('color').onchange = function(){

context.strokeStyle = this.value

};

function doEraser(){

context.strokeStyle = "white&