按照官方例子畫了幾個(gè)基本圖形,算是對(duì)于HTML5 Canvas有所了解，但是感覺(jué)這里面數(shù)學(xué)知識(shí)太忘記了，雖然以前數(shù)學(xué)競(jìng)賽出身，但是好多年不用了，有所遺忘。

昌邑網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),昌邑網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為昌邑近1000家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營(yíng)銷網(wǎng)站建設(shè)要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的昌邑做網(wǎng)站的公司定做！

HTML5的canvas元素只是提供了一個(gè)畫布，而實(shí)際的繪制工作由javascript來(lái)完成。

基本HTML不說(shuō)了， 也就是搭一個(gè)架子，放一個(gè)元素，然后首部引入一些javascript文件，這里面每一個(gè)js文件都是一個(gè)畫圖的例子.

 
 
 
 
 
 
 
 
 
 
 
 
 
canvas：放開(kāi)你的夢(mèng)想
 
 


 

例子1：繪制矩形

/** 
 *  This file is confidential by Charles.Wang 
 *  Copyright belongs to Charles.wang 
 *  You can make contact with Charles.Wang (charles_wang888@126.com) 
 */ 
  
 //這段js代碼用于畫一個(gè)長(zhǎng)方形 
 //參數(shù)是傳進(jìn)來(lái)的畫布canvas的id,表明這段代碼畫在哪里 
 function drawRect(id){ 
     
    //取得canvas對(duì)象，也就是我們js代碼要畫的canvas對(duì)象 
    var canvas=document.getElementById('canvas'); 
    if (canvas==null) 
        return false; 
         
    //從canvas取得圖形上下文，這個(gè)圖形上下文context封裝了許多繪畫方法，這是一個(gè)內(nèi)置的html5對(duì)象 
    var context=canvas.getContext('2d'); 
    //設(shè)定好當(dāng)前圖形上下文的樣式，夜就是當(dāng)前使用顏色來(lái)繪制圖形，此外還有一些其他的樣式 
    context.fillStyle="#0044FF"; 
    //fillXXX用來(lái)填充圖形的內(nèi)部，這里fillRect，表明用當(dāng)前顏色填充圖形內(nèi)部，4個(gè)參數(shù)分別為起點(diǎn)橫坐標(biāo)/起點(diǎn)縱坐標(biāo)/寬度/高度 
    context.fillRect(0,0,400,300); 
    //顏色值既可以用十六進(jìn)制命名，也可以使用顏色名 
    context.fillStyle="red"; 
    context.strokeStyle="blue"; 
    //用于設(shè)置圖形邊框的寬度 
    context.lineWidth=1; 
    context.fillRect(50,50,100,100); 
    //strokeXXX用來(lái)描述圖形的邊框(stroke),這里strokeRect，表明用來(lái)繪制剛才矩形的邊框 
    context.strokeRect(50,50,100,100); 
 } 

畫出來(lái)的結(jié)果是：

例子2：用Path來(lái)繪制一組圓形：

/** 
 *  This file is confidential by Charles.Wang 
 *  Copyright belongs to Charles.wang 
 *  You can make contact with Charles.Wang (charles_wang888@126.com) 
 */ 
  
 function drawPath(id){ 
     
    var canvas=document.getElementById(id); 
    if(canvas == null) 
        return false; 
     
    //依舊先拿到canvas對(duì)象和上下文對(duì)象 
    var context = canvas.getContext("2d"); 
    //先繪制畫布的底圖 
    context.fillStyle="#EEEEEF"; 
    context.fillRect(0,0,400,300); 
     
    //用循環(huán)繪制10個(gè)圓形 
    var n = 0; 
    for(var i=0 ;i<10;i++){ 
        //開(kāi)始創(chuàng)建路徑，因?yàn)橐媹A，圓本質(zhì)上也是一個(gè)路徑，這里向canvas說(shuō)明，我要開(kāi)始畫了，這是起點(diǎn) 
        context.beginPath(); 
        //畫一個(gè)拱形(arcade)，因?yàn)閳A是一種特殊的拱形 
        //6個(gè)參數(shù)分別是 起點(diǎn)橫坐標(biāo)，起點(diǎn)縱坐標(biāo)，圓的半徑，起始弧度，結(jié)束弧度（2PI剛好是360度），是否順時(shí)針 
        context.arc(i*25,i*25,i*10,0,Math.PI*2,true); 
        //關(guān)閉路徑 
        context.closePath(); 
        context.fillStyle="rgba(255,0,0,0.25)"; 
        //填充剛才所畫的圓形 
        context.fill(); 
    } 
 } 

 畫出來(lái)的結(jié)果是：

例子3：繪制直線，并且用直線組合復(fù)雜圖形

/** 
 *  This file is confidential by Charles.Wang 
 *  Copyright belongs to Charles.wang 
 *  You can make contact with Charles.Wang (charles_wang888@126.com) 
 */ 
  
 function drawLine(id){ 
     
    var canvas=document.getElementById(id); 
    if(canvas==null) 
    return false; 
    var context = canvas.getContext('2d'); 
    context.fillStyle="#FF00FF"; 
    context.fillRect(0,0,400,300); 
     
    var n=0; 
    var dx=150; 
    var dy=150; 
    var s = 100; 
    context.beginPath(); 
    context.fillStyle='rgb(100,255,100)'; 
    context.strokeStyle='rgb(0,0,100)'; 
    var x = Math.sin(0); 
    var y = Math.cos(0); 
    var dig=Math.PI/15*11; 
    for(var i = 0;i<30;i++){ 
        var x = Math.sin(i*dig); 
        var y = Math.cos(i*dig); 
        //用三角函數(shù)計(jì)算頂點(diǎn) 
        context.lineTo(dx+x*s,dy+y*s); 
    } 
    context.closePath(); 
    context.fill(); 
    context.stroke(); 
 } 

畫出來(lái)的結(jié)果是：

例子4：使用線性漸變

/** 
 *  This file is confidential by Charles.Wang 
 *  Copyright belongs to Charles.wang 
 *  You can make contact with Charles.Wang (charles_wang888@126.com) 
 */ 
  
 //漸變用于填充，是指填充圖形時(shí)從某種顏色慢慢過(guò)渡到另外一種顏色 
 //線性漸變是指在一個(gè)線段之間進(jìn)行漸變，線段上每個(gè)點(diǎn)隨著離開(kāi)起點(diǎn)的位移值的變化，其顏色也在變化 
function drawLinearGradient(id){ 
     
    var canvas = document.getElementById(id); 
    if(canvas==null) 
    return false; 
     
    //我們還是先繪制底圖，這次，我們的底圖也用了漸變 
    var context = canvas.getContext('2d'); 
    //第一個(gè)漸變，用于底圖，它調(diào)用了createlinearGradient創(chuàng)建了一個(gè)漸變 
    //4個(gè)參數(shù)分別為起點(diǎn)的橫坐標(biāo),起點(diǎn)的縱坐標(biāo)，結(jié)束點(diǎn)的橫坐標(biāo)，結(jié)束點(diǎn)的縱坐標(biāo)，所以本例就是從(0,0)到(0,300)，所以是一個(gè)豎直向下的漸變 
    var gradient1=context.createLinearGradient(0,0,0,300); 
    //addColorStop可以設(shè)置漸變的顏色，第一個(gè)參數(shù)表示偏移量（0-1）之間，第二個(gè)參數(shù)表示顏色 
    //所以，我們定義了從×××到藍(lán)色的漸變 
    gradient1.addColorStop(0,'rgb(255,255,0)'); 
    gradient1.addColorStop(1,'rgb(0,255,255)'); 
    //將上下文對(duì)象關(guān)聯(lián)到當(dāng)前的漸變?cè)O(shè)定作為填充風(fēng)格 
    context.fillStyle=gradient1; 
    //用我們定義的漸變來(lái)繪制底圖 
    context.fillRect(0,0,400,300); 
     
    var n = 0; 
    //這次我們要畫一組圓圈，我們定義一個(gè)從(0,0)到(300,0)也就是水平方向從左到右的漸變 
    var gradient2=context.createLinearGradient(0,0,300,0); 
    //設(shè)置漸變色的起始顏色和終止顏色 
    gradient2.addColorStop(0,'rgba(0,0,255,0.5'); 
    gradient2.addColorStop(1,'rgba(255,0,0,0.5)'); 
    //用循環(huán)畫圓，并且用漸變色填充 
    for(var i=0;i<10;i++){ 
        context.beginPath(); 
        context.fillStyle=gradient2; 
        context.arc(i*25,i*25,i*10,0,Math.PI*2,true); 
        context.closePath(); 
        context.fill(); 
    } 
} 

畫出來(lái)的結(jié)果是：

例子5：圖形基本變換（平移，縮放，旋轉(zhuǎn)）

/** 
 *  This file is confidential by Charles.Wang 
 *  Copyright belongs to Charles.wang 
 *  You can make contact with Charles.Wang (charles_wang888@126.com) 
 */ 
  
  
 //這個(gè)函數(shù)用于演示一些常用的坐標(biāo)變換 
 //常見(jiàn)的坐標(biāo)變換有平移，縮放，旋轉(zhuǎn) 
 function drawTransformShape(id){ 
     
    var canvas = document.getElementById(id); 
    if(canvas == null)  
        return false; 
    //畫底圖 
    var context = canvas.getContext('2d'); 
    context.fillStyle="#FF00FF"; 
    context.fillRect(0,0,400,300); 
     
    //移動(dòng)坐標(biāo)軸的原點(diǎn)，因?yàn)檫@里向右邊平移了200，向下移動(dòng)了50，所以水平方向是居中了 
    context.translate(200,50); 
     
    //循環(huán)可以畫一系列的五角星 
    for(var i=0;i<50;i++){ 
        //每次坐標(biāo)軸的原點(diǎn)往右下各移動(dòng)25像素 
        context.translate(25,25); 
        //并且每次進(jìn)行縮放到0.95倍 
        context.scale(0.95,0.95); 
        //然后把這個(gè)圖形進(jìn)行旋轉(zhuǎn)，每次轉(zhuǎn)動(dòng)+18度（也就是順時(shí)針） 
        context.rotate(Math.PI/10); 
        //然后在當(dāng)前位置畫一個(gè)五角星 
        create5star(context); 
        //并且填充當(dāng)前五角星 
        context.fill(); 
    } 
     
 } 
  
  
 //這個(gè)函數(shù)用于繪制一個(gè)五角星 
 function create5star(context){ 
    var n = 0; 
    var dx = 100; 
    var dy = 0 ; 
    var s = 50; 
    //創(chuàng)建路徑 
    context.beginPath(); 
    context.fillStyle="rgba(255,0,0,0.5)"; 
    var x = Math.sin(0); 
    var y= Math.cos(0); 
    var dig = Math.PI/5 *4; 
    //畫五角星的五條邊 
    for(var i = 0;i<5;i++){ 
        var x = Math.sin(i*dig); 
        var y = Math.cos(i*dig); 
        context.lineTo(dx+x*s,dy+y*s); 
    } 
    context.closePath(); 
 } 
  
  

畫出來(lái)的結(jié)果是：