本篇文章講的是利用的canvas的一些屬性製作一個簡易的畫板，由於本人的時間不足，以及能力也有限，所以功能比較簡單，喜歡自己學習的同學有興趣話可以自己加上一些功能。直接上代碼了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
margin: 0 auto;
width: 600px;
padding: 0;
}
</style>
</head>
<body>
<canvas id="canvas" style="display: block;margin: auto;border:3px solid red;background: #ccc;">
不支持canvas，請升級瀏覽器！
</canvas>
<div class="box">
<input type="button" name="" value="清除畫布" id="clear" />
<input type="button" name="" value="紅色畫筆" id="red" />
<input type="button" name="" value="藍色畫筆" id="blue" />
<input type="button" name="" value="黑色畫筆" id="black" />
<input type="button" name="" value="紫色畫筆" id="zise" />
<input type="button" name="" value="綠色畫筆" id="green" />
<input type="button" name="" value="橡皮擦1" id="eraser"/>
<input type="button" name="" value="橡皮擦2" id="eraser2"/>
</div>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.width = 600;
canvas.height = 600;
var oinput = document.getElementsByTagName('input');
for (var i = 0; i < oinput.length; i++) {
oinput[i].onclick = function(){
var id = this.getAttribute('id');
switch(id){
case 'clear':
context.clearRect(0,0,canvas.width,canvas.height);
break;
case 'red':
draw(context,"red");
break;
case 'blue':
draw(context,"blue");
break;
case 'black':
draw(context,"black");
break;
case 'zise':
draw(context,"purple");
break;
case 'green':
draw(context,"green");
break;
case 'eraser':
clear(context,'#ccc');
break;
case 'eraser2':
clearRect(context);
break;
}
}
}
draw(context,"#fff");
var canvasUrl = canvas.toDataURL();
console.log(canvasUrl);
}
//橡皮擦2(清除路徑)
function clearRect(cxt){
canvas.onmousedown = function(e){
var e = e || window.event;
cxt.clearRect(e.clientX - canvas.offsetLeft -3,e.clientY - canvas.offsetTop - 3,20,20);
document.onmousemove = function(e){
var e = e || window.event;
cxt.clearRect(e.clientX - canvas.offsetLeft -3,e.clientY - canvas.offsetTop - 3,20,20);
}
document.onmouseup = function(){
document.onmousedown = false;
document.onmousemove = false;
}
}
}
//橡皮擦1(用和畫布背景顏色相同的顏色，覆蓋原有的路徑)
function clear(cxt,bgColor){
canvas.onmousedown = function(e){
var e = e || window.event;
cxt.beginPath();
cxt.strokeStyle = bgColor;
cxt.lineWidth = 20;//線條的寬度
cxt.moveTo(e.clientX - canvas.offsetLeft,e.clientY - canvas.offsetTop -3);
document.onmousemove = function(e){
var e = e || window.event;
cxt.lineTo(e.clientX - canvas.offsetLeft,e.clientY - canvas.offsetTop -3);
cxt.stroke();
}
document.onmouseup = function(){
document.onmousedown = false;
document.onmousemove = false;
cxt.closePath();
}
}
}
//繪製路徑
function draw(cxt,bgColor){
canvas.onmousedown = function(e){
var e = e || window.event;
cxt.beginPath();
cxt.strokeStyle = bgColor;
cxt.moveTo(e.clientX - canvas.offsetLeft,e.clientY - canvas.offsetTop - 3);
document.onmousemove = function(e){
var e = e || window.event;
cxt.lineTo(e.clientX - canvas.offsetLeft - 3,e.clientY - canvas.offsetTop - 3);
cxt.stroke();
}
}
document.onmouseup = function(){
document.onmousedown = false;
document.onmousemove = false;
cxt.closePath();
}
}
</script>
</body>
</html>
想要獲得更多資料的 請微信搜索公衆號 【熱血科技】，關注一下即可。
