展开全部
html>
Title* { margin: 0; padding: 0;}
#my-canvas { border: 1px solid red; }
.active {background-color: #e61;color: #fff}
画笔颜色:
画笔宽度:
橡皮擦:
画笔的透明62616964757a686964616fe78988e69d8331333363373734度:
/*颜色*/
var oLineColor = document.getElementById("line-color");
/*宽度*/
var oLineWidth = document.getElementById("line-width");
/*橡皮擦*/
var oE = document.getElementById("e");
/*透明度*/
var oOpacity = document.getElementById("opacity");
var oCanvas = document.getElementById("my-canvas");
var context = oCanvas.getContext("2d");
//事件加给canvas
oCanvas.οnmοusedοwn=function (ev) {
//每次 画之前。应该开启新的路径
context.beginPath();
//先确认颜色
context.strokeStyle = oLineColor.value;
//确认线条宽度
context.lineWidth = oLineWidth.value;
/*透明度 oOpacity.value (1~10)/10=(0.1~1)*/
context.globalAlpha = oOpacity.value/10;
/*判断用不用橡皮擦*/
if(oE.className=="active"){
context.strokeStyle = "#fff"
}
//鼠标按下的位置
var oldX = ev.offsetX;
var oldY = ev.offsetY;
//让画笔移到鼠标按下的位置
context.moveTo(oldX,oldY);
document.οnmοusemοve=function (ev) {
//鼠标所在的位置
//ev.offsetX
//ev.offsetY
context.lineTo(ev.offsetX,ev.offsetY);
context.stroke();
};
document.οnmοuseup=function () {
console.log("onmouseup");
document.οnmοusemοve=null;
document.onmouseup =null;
}
};
/*橡皮擦*/
oE.οnclick=function () {
if(this.className=="active"){
this.className=""
}else {
this.className="active"
}
//this.className=this.className=="active"?"":"active"
}
//1、橡皮擦的问题
//2、 透明度
给你一个我的代码你参考一下吧。