1.利用 canvas 寫一個 牛 字：
<!-- 寬高必須寫在元素本身 canvas id="canvasId" width="600px" height="400px" -->
? ? <canvas id="canvasId" width="600px" height="400px" style="border: 1px solid red;"></canvas>
? ? <button id="btn">清除</button>
? ? <script>
? ? ? ? /* 獲取canvas元素 */
? ? ? ? let cavsDOM = document.getElementById('canvasId');
? ? ? ? let btn = document.getElementById('btn')
? ? ? ? /* 創建canvas對象 */
? ? ? ? let cavs = cavsDOM.getContext('2d');
? ? ? ? /* 繪制一條直線 */
? ? ? ? /* 設置開始點 */
? ? ? ? /* 距離左邊100,距離頂部100的起始點 */
? ? ? ? cavs.moveTo(100,100);
? ? ? ? /* 距離左邊300,距離頂部100的起始點 */
? ? ? ? cavs.lineTo(300,100)
? ? ? ? /* 起始點 */
? ? ? ? cavs.lineTo(200,100)
? ? ? ? /* 終點 */
? ? ? ? cavs.lineTo(200,350)
? ? ? ? cavs.moveTo(200,10);
? ? ? ? cavs.lineTo(200,550)
? ? ? ? cavs.moveTo(130,50);
? ? ? ? cavs.lineTo(40,250)
? ? ? ? cavs.moveTo(70,200);
? ? ? ? cavs.lineTo(330,200)
? ? ? ? /* 設置線條的顏色值 */
? ? ? ? cavs.strokeStyle = 'pink';
? ? ? ? /* 設置線條的粗細 */
? ? ? ? cavs.lineWidth = "10"
? ? ? ? /* 把起始點和終點連起來 */
? ? ? ? cavs.stroke()
效果：
2.利用canvas寫一個畫板，添加清除鍵：
在之前的基礎上加上
?let move = false;
? ? ? ? cavsDOM.onmousedown = function(e){
? ? ? ? ? ? let event = e||window.event
? ? ? ? ? ? /* 兼容寫法 */
? ? ? ? ? ? let x = event.offsetX;
? ? ? ? ? ? let y = event.offsetY;
? ? ? ? ? ? cavs.moveTo(x,y);
? ? ? ? ? ? move = true
? ? ? ? }
? ? ? ? cavsDOM.onmousemove = function(e){
? ? ? ? ? ? let event = e||window.event
? ? ? ? ? ? /* 兼容寫法 */
? ? ? ? ? ? let x = event.offsetX;
? ? ? ? ? ? let y = event.offsetY;
? ? ? ? ? ? if(move){
? ? ? ? ? ? ? ? cavs.lineTo(x,y);
? ? ? ? ? ? ? ? cavs.stroke();
? ? ? ? ? ? }
? ? ? ? ? ? cavsDOM.onmouseup = function(e){
? ? ? ? ? ? ? ? move=false
? ? ? ? ? ? }
? ? ? ? ? ? btn.onclick = function(){
? ? ? ? ? ? ? ? cavs.beginPath()
? ? ? ? ? ? ? ? cavs.clearRect(0,0,cavsDOM.width,cavsDOM.height)
? ? ? ? ? ? }
? ? ? ? }
效果圖：
按清除鍵清除：
3. 創建和關閉路徑：
<body>
? ? <!-- 創建和關閉路徑 -->
? ? <canvas class="cav" width="600px" height="400px" style="border: 1px solid red;"></canvas>
? ? <script>
? ? ? ? let cavDOM = document.getElementsByClassName('cav')[0];
? ? ? ? let cav = cavDOM.getContext('2d');
? ? ? ? /* 如果需要閉合路徑 開始新的起點路徑時 都需要創建和關閉路徑 */
? ? ? ? //開始創建路徑
? ? ? ? //cav.beginPath()
? ? ? ? //關閉路徑
? ? ? ? //cav.closePath()
? ? ? ? //純使用線來畫三角形 ?最上面終點箭頭有瑕疵
? ? ? ? ?/* cav.moveTo(200,100); ?起始點
? ? ? ? ?cav.lineTo(100,250); ? ? 起始點到第二個點
? ? ? ? ?cav.lineTo(350,250) ? ? ? 第二個點到第三個點
? ? ? ? ?cav.lineTo(200,100);*/ ? ? ?// 第三個個點到第一個點
? ? ? ? ?//開始繪制
? ? ? ? ?cav.beginPath()
? ? ? ? ?cav.moveTo(200,100); ?//第一個點的位置
? ? ? ? ?cav.lineTo(60,250); ?//第二個點的位置
? ? ? ? ?cav.lineTo(350,250) ? //第三個點的位置
? ? ? ? ?//結束繪制
? ? ? ? ?cav.closePath()
? ? ? ? ?cav.fillStyle='pink'
? ? ? ? ?cav.fill();
? ? ? ? ?cav.strokeStyle = 'red';
? ? ? ? ?cav.lineWidth = '8'
? ? ? ? ?cav.stroke()
? ? </script>
</body>
效果圖：
4.制作矩形：
<body>
? ? <canvas width="600px" height="400px" style="border: 1px solid red;"></canvas>
? ? <script>
? ? ? ? let cavDOM = document.getElementsByTagName('canvas')[0];
? ? ? ? let cav = cavDOM.getContext('2d');
? ? ? ? /* cav.beginPath();
? ? ? ? cav.rect(100,100,300,200)
? ? ? ? cav.closePath()
? ? ? ? cav.fill()
? ? ? ? cav.stroke() */
? ? ? ? cav.fillStyle='green'
? ? ? ? cav.fillRect(100,100,300,200)
? ? ? ? /* 要先設置顏色再去填充 */
? ? ? ? /* cav.fillStyle='red'
? ? ? ? cav.fillRect(100,100,300,200) */
? ? ? ? /* 設置填充顏色不然默認為黑色 */
? ? ? ? /* cav.strokeRect(x,y,width,height) 繪制矩形邊框 */
? ? ? ? cav.strokeStyle = 'red';
? ? ? ? cav.lineWidth = 8
? ? ? ? /* 大小不要用像素來計算 */
? ? ? ? cav.strokeRect(100,100,300,200)
? ? ? ? /* 清除矩形區域 */
? ? ? ? cav.clearRect(120,120,100,100)
? ? </script>
</body>
效果圖：
