按照官方例子畫了幾個基本圖形,算是對於HTML5 Canvas有所了解，但是感覺這裡面數學知識太忘記了，雖然以前數學競賽出身，但是好多年不用了，有所遺忘。
HTML5的canvas元素只是提供了一個畫布，而實際的繪制工作由javascript來完成。
基本HTML不說了， 也就是搭一個架子，放一個<canvas>元素，然後首部引入一些javascript文件，這裡面每一個js文件都是一個畫圖的例子.
- <!DOCTYPE html>
- <head>
- <meta charset="UTF-8">
- <title>HTML5 Canvas DEMO</title>
- <script type="text/javascript" src="js/drawRect.js"></script>
- <script type="text/javascript" src="js/drawPath.js"></script>
- <script type="text/javascript" src="js/drawLine.js"></script>
- <script type="text/javascript" src="js/drawLinearGradient.js"></script>
- <script type="text/javascript" src="js/drawTransformShape.js"></script>
- <script type="text/javascript" src="js/drawAll.js"></script>
- </head>
- <body onload="drawAll('canvas')"></body>
- <h2>canvas：放開你的夢想</h2>
- <canvas id="canvas" width="400" height="300"/>
- <br><br>
例子1：繪制矩形
- /**
- * This file is confidential by Charles.Wang
- * Copyright belongs to Charles.wang
- * You can make contact with Charles.Wang ([email protected])
- */
- //這段js代碼用於畫一個長方形
- //參數是傳進來的畫布canvas的id,表明這段代碼畫在哪裡
- function drawRect(id){
- //取得canvas對象，也就是我們js代碼要畫的canvas對象
- var canvas=document.getElementById('canvas');
- if (canvas==null)
- return false;
- //從canvas取得圖形上下文，這個圖形上下文context封裝了許多繪畫方法，這是一個內置的html5對象
- var context=canvas.getContext('2d');
- //設定好當前圖形上下文的樣式，夜就是當前使用顏色來繪制圖形，此外還有一些其他的樣式
- context.fill;
- //fillXXX用來填充圖形的內部，這裡fillRect，表明用當前顏色填充圖形內部，4個參數分別為起點橫坐標/起點縱坐標/寬度/高度
- context.fillRect(0,0,400,300);
- //顏色值既可以用十六進制命名，也可以使用顏色名
- context.fill;
- context.stroke;
- //用於設置圖形邊框的寬度
- context.lineWidth=1;
- context.fillRect(50,50,100,100);
- //strokeXXX用來描述圖形的邊框(stroke),這裡strokeRect，表明用來繪制剛才矩形的邊框
- context.strokeRect(50,50,100,100);
- }
畫出來的結果是：
650) this.width=650;" border=0>
例子2：用Path來繪制一組圓形：
- /**
- * This file is confidential by Charles.Wang
- * Copyright belongs to Charles.wang
- * You can make contact with Charles.Wang ([email protected])
- */
- function drawPath(id){
- var canvas=document.getElementById(id);
- if(canvas == null)
- return false;
- //依舊先拿到canvas對象和上下文對象
- var context = canvas.getContext("2d");
- //先繪制畫布的底圖
- context.fill;
- context.fillRect(0,0,400,300);
- //用循環繪制10個圓形
- var n = 0;
- for(var i=0 ;i<10;i++){
- //開始創建路徑，因為要畫圓，圓本質上也是一個路徑，這裡向canvas說明，我要開始畫了，這是起點
- context.beginPath();
- //畫一個拱形(arcade)，因為圓是一種特殊的拱形
- //6個參數分別是 起點橫坐標，起點縱坐標，圓的半徑，起始弧度，結束弧度（2PI剛好是360度），是否順時針
- context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
- //關閉路徑
- context.closePath();
- context.fill;
- //填充剛才所畫的圓形
- context.fill();
- }
- }
畫出來的結果是：
650) this.width=650;" border=0>