繪制之后的效果圖：
1.創建 canvas元素
向 HTML 5 頁面添加 canvas 元素。
規定元素的 id、寬度和高度：
| <canvas id="canvas" width="1024" height="768" style="border:1px solid #aaa;display:block;margin:50 auto;"></canvas> |
2.在JS頁面中就行繪畫操作
| var context=canvas.getContext("2d"); |
3. 通過 JavaScript 來繪制花瓣
canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內部完成：
首先繪制一個花瓣，花瓣的圓心坐標為（450，200），花瓣的半徑為50，花瓣的填充顏色為粉紅色。其他花瓣及花蕊繪制方法一樣，代碼如下：
| context.beginPath(); context.arc(450,200,50,0,0.5*Math.PI,true); context.stroke(); context.fill(); |
源代碼：
<!DOCTYPE html> <html> <head> <title>canvas繪制鮮花</title> </head> <body> <canvas id="canvas" width="1024" height="768" style="border:1px solid #aaa;display:block;margin:50 auto;"></canvas> <script> var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d"); context.lineWidth=2; context.strokeStyle="black"; context.fillStyle = "#ED6E91"; //花瓣右上 context.beginPath(); context.arc(550,200,50,0,2*Math.PI); context.stroke(); context.fill(); //花瓣右下 context.beginPath(); context.arc(550,300,50,0,2*Math.PI); context.stroke(); context.fill(); //花瓣左上 context.beginPath(); context.arc(450,200,50,0,0.5*Math.PI,true); context.stroke(); context.fill(); //花瓣左下 context.beginPath(); context.arc(450,300,50,0,1.5*Math.PI); context.stroke(); context.fill(); //花蕊 context.beginPath(); context.fillStyle = "#f90"; context.arc(500,250,50,0,2*Math.PI); context.stroke(); context.fill(); //花徑 context.beginPath(); context.arc(150,300,350,0,0.3*Math.PI); context.stroke(); //右邊的葉子 context.beginPath(); context.fillStyle = "green"; context.arc(468,400,50,0,0.5*Math.PI); context.closePath(); context.stroke(); context.fill(); //左邊的葉子 context.beginPath(); context.fillStyle = "green"; context.arc(468,400,50,0.5*Math.PI,Math.PI,false); context.closePath(); context.stroke(); context.fill(); </script> </body> </html>