canvas製做一個在線畫圖版

時間 2019-11-19

標籤 canvas 製做一個在線畫圖简体版

原文原文鏈接

HTML代碼：<!DOCTYPE html>html

<html>
 <head>
  <title> 在線畫圖</title>
  <meta charset="utf-8" />
<style>
　　#d{margin-left:30%;}
</style>
 </head>

 <body>
    <div id="d">
　　　　<canvas id="canvas" width="500" height="500" style="border:1px solid red;"></canvas>
　　</div>

</body>
</html>

JavaScript代碼：canvas

 1 <script>
 2         var canvas=document.getElementById("canvas");
 3         var ctx=canvas.getContext("2d");
 4         
 5         canvas.onmousedown=function(event){
 6             var x=event.clientX-canvas.offsetLeft;
 7             var y=event.clientY-canvas.offsetTop;
 8             ctx.beginPath();
 9             ctx.moveTo(x,y);
10 
11             document.onmousemove=function(event){
12             var x=event.clientX-canvas.offsetLeft;
13             var y=event.clientY-canvas.offsetTop;
14             ctx.lineTo(x,y);
15             ctx.strokeStyle="red";
16             ctx.stroke();
17             };
18         };
19         document.onmouseup=function(){
20             ctx.closePath();
21             document.onmousemove=null;
22         };
23     </script>

運行後：spa

相關標籤/搜索