CSS3-Canvas畫布（線條）

時間 2019-12-09

標籤 css3 css canvas 畫布線條欄目 CSS 简体版

原文原文鏈接

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>CSS3-Canvas畫布（線條）</title>    <script>     window.onload=function () {         var canvas=document.getElementById("canvas");//獲取canvas對象         var ctx=canvas.getContext("2d"); //建立二維的繪圖上下文對象         //經過上下文對象調用屬性或方法來繪圖         ctx.beginPath();//  「beginPath()」 表開始一條路徑或者重置當前的路徑         ctx.lineCap="round";//圓角線條         ctx.moveTo(5,100);//開始點座標         ctx.lineTo(200,300);//結束點座標         ctx.lineWidth=20;//「lineWidth」定義路徑的寬度（有繼承性，如要定義不一樣寬度的路徑則要單獨定義）         ctx.strokeStyle="lightblue";//「strokeStyle」填充路徑的顏色         ctx.stroke();//調用 繪製         ctx.beginPath();//  「beginPath()」 表開始一條路徑或者重置當前的路徑         ctx.lineCap="round";//圓角線條         ctx.moveTo(30,30);//開始點座標         ctx.lineTo(300,300);//結束點座標         ctx.lineWidth=20;//「lineWidth」定義路徑的寬度（有繼承性，如要定義不一樣寬度的路徑則要單獨定義）         ctx.strokeStyle="lightpink";//「strokeStyle」填充路徑的顏色         ctx.stroke();//調用 繪製         ctx.beginPath();//  「beginPath()」 表開始一條路徑或者重置當前的路徑         ctx.lineCap="square";// 正方形線條         ctx.moveTo(10,50);//開始點座標         ctx.lineTo(350,400);//結束點座標         ctx.strokeStyle="lightgreen";//填充路徑的顏色         ctx.stroke();//調用 繪製     }    </script></head><body><h2>Canvas畫布（線條）</h2><canvas id="canvas" width="500" height="500" style="border:1px solid red ">           瀏覽器不支持canvas</canvas></body></html>

1. 13-1 畫布繪製基本線條
2. Canvas線條動畫
3. 基於HTML5 畫布功能canvas的繪畫板：畫線、畫圓、畫矩形、橡皮、改變線條
4. 【Web動畫】SVG 線條動畫入門
5. SVG 線條動畫入門
6. 炫酷線條動畫--svg
7. svg 線條動畫淺嘗
8. PPT製做線條動畫
9. c#畫一條橫線
10. PS 畫一條虛線
更多相關文章...
• C# 多線程 - C#教程
• ionic 加載動畫 - ionic 教程
• JDK13 GA發佈：5大特性解讀
• 適用於PHP初學者的學習線路和建議

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。