下面小编就为大家带来一篇

html5 canvas

绘制矩形和圆形的实例代码。

小编觉得挺不错

的，现在就分享给大家，也给大家做个参考。

html5 canvas

绘制矩形和圆形的实例代码

JavaScript Code 

;!DOCTYPE html; ;; 

;html; ;; 

; ; ;head; ;; 

; ; ; ; ;meta charset="UTF-8"; ;; 

; ; ; ; ;title;;/title; ;; 

; ; ;/head; ;; 

; ; ;body onload="draw(),drawarc()"; ;; 

; ; ; ; ;!--

绘制的步骤：

获取

canvas

元素

-;

取得上下文

-;

填充与绘制边框

-;

设定绘图样式

--; ;; 

; 

; 

; 

; 

;!--

绘制其他复杂图形需要使用路径：开始创建路径

-;

创建图形路径

-;

关闭路径

-;

绘制图形

--; ;; 

; ; ; ; ;!--eg:

绘制矩形

--; ;; 

; 

; 

; 

; 

绘制矩形

:;canvas 

id="ca";;/canvas;;br 

/; ;; 

; 

; 

; 

; 

绘

制

圆

形

：

;canvas 

id="yuan";;/canvas; 

;; 

; ; ;/body; ;; 

;/html; ;; 

;script; ;; 

; ; //

绘制矩形

;; 

; ; function draw(){ ;; 

; ; ; ; var canvas=document.getElementById('ca'); //

获取

canvas

元

素

;; 

; ; ; ; if (canvas==null) ;; 

; ; ; ; ; ;return false; ;; 

; 

; 

; 

; 

var 

context=canvas.getContext('2d'); 

//

取

得

上

下

文

;; 

; 

; 

; 

; 

context.fillStyle='#EEEFF'; 

; 

//

填

充

颜

色

;; 

; 

; 

; 

; 

context.fillRect(0,0,400,300); 

//

填

充

矩

形

(

矩

形

1) 

;; 

; ; ; ; context.fillStyle='red'; ;; 

; ; ; ; context.strokeStyle='blue'; //

边框颜色

;; 

; ; ; ; context.lineWidth=1; ; ; ; ;//

边框

宽度

;; 

; ; ; ; context.fillRect(50,50,100,100); //

填充矩形（内部矩形

2

）

;; 

; 

; 

; 

; 

context.strokeRect(50,50,100,100); 

//

绘

制

边

框