HTML5 Canvas 繪圖入門
HTML5 Canvas 繪圖入門，僅供學習參考
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 移動Web開發指南</title>
<style type="text/css">
h1, h5
{
text-align: center;
}
canvas
{
float: left;
margin: 10px;
overflow: hidden;
}
</style>
<script type="text/javascript" language="javascript">
window.onload = function () {
drawCanvas(0, 0, "canvase_01", "red", 200, 200);
drawCanvas(0, 0, "canvase_02", "green", 200, 100);drawCanvas(0, 0, "canvase_05", "blank", 300, 60); drawCanvas(75, 60, "canvase_05", "gray", 150, 90); drawCanvas(0, 0, "canvase_06", "blank", 300, 50); drawCanvas(0, 50, "canvase_06", "red", 300, 50); drawCanvas(0, 100, "canvase_06", "#F8CB1C", 300, 50); drawCanvas(0, 0, "canvase_07", "green", 100, 150); drawCanvas(100, 0, "canvase_07", "white", 100, 150); drawCanvas(200, 0, "canvase_07", "red", 100, 150); drawRound("canvase_03", "blue", 75, true); drawRound("canvase_04", "yellow", 75, false); drawRound("canvase_08", "red", 75, true); drawRound("canvase_08", "yellow", 75, false); }; /* * Canvas 畫非圓圖形測試 * x: 圖形的X軸開始坐標 * y: 圖形的Y軸開始坐標 * id： 元素id * bgColor: 填充的背景顏色 * width: 寬 * height: 高 */ function drawCanvas(x, y, id, bgColor, width, height) { var canvas = document.getElementById(id); if (canvas != null && canvas != undefined) { var ctx = canvas.getContext("2d"); ctx.fillStyle = bgColor; //第一個和第二個參數，代表開始坐標 //第三個參數是圖形的寬 //第四個參數是圖形的高 ctx.fillRect(Number(x), Number(y), Number(width), Number(height)); } } /* * Canvas 畫圓測試 * id： 元素id * bgColor: 填充的背景顏色 * R： 圓半徑 * IsRound: 是否為正圓(true正圓、false 半圓) */ function drawRound(id, bgColor, R, IsRound) { var canvas = document.getElementById(id); if (canvas != null && canvas != undefined) { var ctx = canvas.getContext("2d"); ctx.fillStyle = bgColor; ctx.beginPath(); var round = Math.PI; if (Boolean(IsRound)) round = Math.PI * 2; //第一個和第二個參數，代表圓心坐標 //第三個參數是圓的半徑 //第四個參數代表圓周起始位置(0 起始位置。沿順時針路線，分別是0.5 (正下方)，1 PI和1.5 PI(正上方)，為畫餅圖提供了扇形范圍的依據) //第五個參數是弧長(Math.PI*1 半圓、Math.PI*2就是整個圓) ctx.arc(150, 75, Number(R), 0, round, true); ctx.closePath(); ctx.fill(); } } </script> </head> <body> <header> <section> <h1> HTML5 移動Web開發指南</h1> </section> </header> <fieldset> <legend>HTML5 新元素--Canvas繪圖元素</legend> <article> <section> <canvas id="canvase_01"> 您的瀏覽器不支持Canvas元素！ </canvas> <canvas id="canvase_02"> 您的瀏覽器不支持Canvas元素！ </canvas> <canvas id="canvase_03"> 您的瀏覽器不支持Canvas元素！ </canvas> <canvas id="canvase_04"> 您的瀏覽器不支持Canvas元素！ </canvas> <canvas id="canvase_05"> 您的瀏覽器不支持Canvas元素！ </canvas> <canvas id="canvase_06"> 您的瀏覽器不支持Canvas元素！ </canvas> <canvas id="canvase_07"> 您的瀏覽器不支持Canvas元素！ </canvas> <canvas id="canvase_08"> 您的瀏覽器不支持Canvas元素！ </canvas> </section> </article> </fieldset> <footer> <section> <h5> <span style="font-family: Arial, Helvetica, sans-serif;">HTML5 新元素--Canvas繪圖元素</span> </h5> </section> </footer> </body> </html> </pre> <p></p>
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！