<!DOCTYPE html>
<html lang="en">
<head>? ?
<meta charset="UTF-8">? ?
<title>Canvas實(shí)現(xiàn)簡(jiǎn)易涂鴉板</title>
</head>
<body>
? ? <canvas id="canvas" width="500" height="500" style="box-shadow:0 5px 40px black;background-color:? ? ? ? rgba(0,0,0,0.1)"></canvas>
? ? <script>?
? ? ? ? canvas = document.getElementById('canvas');?
? ? ? ? if(canvas.getContext){? ? ? ?
? ? ? ? ? ? context = canvas.getContext('2d');?
? ? ? ? }? ?
? ? ? ? context.lineWidth = 5;? ?
? ? ? ? context.strokeStyle = '#0000ff';?
? ? ? ? canvas.onmousedown = function(e){? ? ? ?
? ? ? ? e.preventDefault();? ? ? ?
? ? ? ? var x = e.clientX - canvas.offsetLeft;? ? ? ?
? ? ? ? var y = e.clientY - canvas.offsetTop;? ? ? ?
? ? ? ? context.moveTo(x,y);? ? ? ?
? ? ? ? canvas.onmousemove = function(e){? ? ? ? ? ?
? ? ? ? e.preventDefault();? ? ? ? ? ?
? ? ? ? var x = e.clientX - canvas.offsetLeft;? ? ? ? ? ?
? ? ? ? var y = e.clientY - canvas.offsetTop;? ? ? ? ?
? ? ? ? context.lineTo(x,y);? ? ? ? ? ?
? ? ? ? context.stroke();? ? ? ?
? ? };? ? ? ?
? ? canvas.onmouseup = function(e){? ? ? ? ? ?
? ? ? ? ? ? canvas.onmousemove = null;? ? ?
? ? };? ?
};
</script>
</body>
</html>
