javascript+Canvas實現畫板功能
阿新 • • 發佈：2020-06-24
本文例項為大家分享了Canvas實現畫板功能的具體程式碼，供大家參考，具體內容如下
CSS樣式程式碼
body,html {
text-align: center;
padding-top: 20px;
/*margin: 0;*/
}
canvas {
box-shadow: 0 0 10px #333;
margin: 0 auto;
/*position: absolute;
left: 0;
border: 1px solid red;*/
}
這是主體程式碼
<body onload="draw()">
<canvas id="canvas" width="800" height="600">
</canvas>
<script>
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
//塗鴉
//新增滑鼠按下事件
canvas.onmousedown=function(e){
var ev=e||window.event;//相容性
var x=ev.clientX-canvas.offsetLeft;
var y=ev.clientY-canvas.offsetTop;
ctx.strokeStyle='red';
ctx.lineWidth=10;
ctx.beginPath();
ctx.moveTo(x,y);
//onmousemove
canvas.onmousemove=function(e){
var ev=e||window.event;//相容性
var x=ev.clientX - canvas.offsetLeft;
var y=ev.clientY - canvas.offsetTop;
ctx.lineTo(x,y);
ctx.stroke();
}
canvas.onmouseup=function(){
canvas.onmousemove="";//當滑鼠不點選時則不會畫畫
}
}
}
}
</script>
</body>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。