Linux教程網 >> Linux編程 >> Linux編程 >> HTML5 Canvas 畫圖

HTML5 Canvas 畫圖

日期：2017/3/1 10:23:15 编辑：Linux編程

按照官方例子畫了幾個基本圖形,算是對於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(); 
    } 
 }