欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

HTML5Canvas畫圖

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

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

HTML5的canvas元素只是提供了一個畫布，而實際的繪制工作由javascript來完成。

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

  1. <!DOCTYPE html> 
  2. <head> 
  3. <meta charset="UTF-8"> 
  4. <title>HTML5 Canvas DEMO</title> 
  5. <script type="text/javascript" src="js/drawRect.js"></script> 
  6. <script type="text/javascript" src="js/drawPath.js"></script> 
  7. <script type="text/javascript" src="js/drawLine.js"></script> 
  8. <script type="text/javascript" src="js/drawLinearGradient.js"></script> 
  9. <script type="text/javascript" src="js/drawTransformShape.js"></script> 
  10. <script type="text/javascript" src="js/drawAll.js"></script> 
  11. </head> 
  12.  
  13. <body onload="drawAll('canvas')"></body> 
  14. <h3>canvas：放開你的夢想</h3> 
  15. <canvas id="canvas" width="400" height="300"/> 
  16. <br><br> 

例子1：繪制矩形

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

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

HTML5 Canvas 畫圖

例子2：用Path來繪制一組圓形：

  1. /** 
  2.  *  This file is confidential by Charles.Wang 
  3.  *  Copyright belongs to Charles.wang 
  4.  *  You can make contact with Charles.Wang (charles_wang888@126.com) 
  5.  */ 
  6.   
  7.  function drawPath(id){ 
  8.      
  9.     var canvas=document.getElementById(id); 
  10.     if(canvas == null) 
  11.         return false; 
  12.      
  13.     //依舊先拿到canvas對象和上下文對象 
  14.     var context = canvas.getContext("2d"); 
  15.     //先繪制畫布的底圖 
  16.     context.fillStyle="#EEEEEF"; 
  17.     context.fillRect(0,0,400,300); 
  18.      
  19.     //用循環(huán)繪制10個圓形 
  20.     var n = 0; 
  21.     for(var i=0 ;i<10;i++){ 
  22.         //開始創(chuàng)建路徑，因為要畫圓，圓本質(zhì)上也是一個路徑，這里向canvas說明，我要開始畫了，這是起點 
  23.         context.beginPath(); 
  24.         //畫一個拱形(arcade)，因為圓是一種特殊的拱形 
  25.         //6個參數(shù)分別是 起點橫坐標(biāo)，起點縱坐標(biāo)，圓的半徑，起始弧度，結(jié)束弧度（2PI剛好是360度），是否順時針 
  26.         context.arc(i*25,i*25,i*10,0,Math.PI*2,true); 
  27.         //關(guān)閉路徑 
  28.         context.closePath(); 
  29.         context.fillStyle="rgba(255,0,0,0.25)"; 
  30.         //填充剛才所畫的圓形 
  31.         context.fill(); 
  32.     } 
  33.  } 

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

HTML5 Canvas 畫圖

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

  1. /** 
  2.  *  This file is confidential by Charles.Wang 
  3.  *  Copyright belongs to Charles.wang 
  4.  *  You can make contact with Charles.Wang (charles_wang888@126.com) 
  5.  */ 
  6.   
  7.  function drawLine(id){ 
  8.      
  9.     var canvas=document.getElementById(id); 
  10.     if(canvas==null) 
  11.     return false; 
  12.     var context = canvas.getContext('2d'); 
  13.     context.fillStyle="#FF00FF"; 
  14.     context.fillRect(0,0,400,300); 
  15.      
  16.     var n=0; 
  17.     var dx=150; 
  18.     var dy=150; 
  19.     var s = 100; 
  20.     context.beginPath(); 
  21.     context.fillStyle='rgb(100,255,100)'; 
  22.     context.strokeStyle='rgb(0,0,100)'; 
  23.     var x = Math.sin(0); 
  24.     var y = Math.cos(0); 
  25.     var dig=Math.PI/15*11; 
  26.     for(var i = 0;i<30;i++){ 
  27.         var x = Math.sin(i*dig); 
  28.         var y = Math.cos(i*dig); 
  29.         //用三角函數(shù)計算頂點 
  30.         context.lineTo(dx+x*s,dy+y*s); 
  31.     } 
  32.     context.closePath(); 
  33.     context.fill(); 
  34.     context.stroke(); 
  35.  } 

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

HTML5 Canvas 畫圖

例子4：使用線性漸變

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

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

HTML5 Canvas 畫圖

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

  1. /** 
  2.  *  This file is confidential by Charles.Wang 
  3.  *  Copyright belongs to Charles.wang 
  4.  *  You can make contact with Charles.Wang (charles_wang888@126.com) 
  5.  */ 
  6.   
  7.   
  8.  //這個函數(shù)用于演示一些常用的坐標(biāo)變換 
  9.  //常見的坐標(biāo)變換有平移，縮放，旋轉(zhuǎn) 
  10.  function drawTransformShape(id){ 
  11.      
  12.     var canvas = document.getElementById(id); 
  13.     if(canvas == null)  
  14.         return false; 
  15.     //畫底圖 
  16.     var context = canvas.getContext('2d'); 
  17.     context.fillStyle="#FF00FF"; 
  18.     context.fillRect(0,0,400,300); 
  19.      
  20.     //移動坐標(biāo)軸的原點，因為這里向右邊平移了200，向下移動了50，所以水平方向是居中了 
  21.     context.translate(200,50); 
  22.      
  23.     //循環(huán)可以畫一系列的五角星 
  24.     for(var i=0;i<50;i++){ 
  25.         //每次坐標(biāo)軸的原點往右下各移動25像素 
  26.         context.translate(25,25); 
  27.         //并且每次進(jìn)行縮放到0.95倍 
  28.         context.scale(0.95,0.95); 
  29.         //然后把這個圖形進(jìn)行旋轉(zhuǎn)，每次轉(zhuǎn)動+18度（也就是順時針） 
  30.         context.rotate(Math.PI/10); 
  31.         //然后在當(dāng)前位置畫一個五角星 
  32.         create5star(context); 
  33.         //并且填充當(dāng)前五角星 
  34.         context.fill(); 
  35.     } 
  36.      
  37.  } 
  38.   
  39.   
  40.  //這個函數(shù)用于繪制一個五角星 
  41.  function create5star(context){ 
  42.     var n = 0; 
  43.     var dx = 100; 
  44.     var dy = 0 ; 
  45.     var s = 50; 
  46.     //創(chuàng)建路徑 
  47.     context.beginPath(); 
  48.     context.fillStyle="rgba(255,0,0,0.5)"; 
  49.     var x = Math.sin(0); 
  50.     var y= Math.cos(0); 
  51.     var dig = Math.PI/5 *4; 
  52.     //畫五角星的五條邊 
  53.     for(var i = 0;i<5;i++){ 
  54.         var x = Math.sin(i*dig); 
  55.         var y = Math.cos(i*dig); 
  56.         context.lineTo(dx+x*s,dy+y*s); 
  57.     } 
  58.     context.closePath(); 
  59.  } 
  60.   
  61.   

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

HTML5 Canvas 畫圖

 

分享文章：HTML5Canvas畫圖
文章鏈接：http://aaarwkj.com/article34/pcdjpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、網(wǎng)站策劃、網(wǎng)站收錄、Google、品牌網(wǎng)站設(shè)計、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

小程序開發(fā)
最近av中文字幕电影| 中文字幕国产精品一区二| 日本在线一区二区中文| 欧美激情网页一区三区| 国产婷婷色三区一区二区| 国产av手机自拍看片| 亚洲精品国产av成人| 国产日韩欧美亚洲中文国| 国产精品日韩欧美一区二区| 国产日韩综合精品一区| 精品国内日本一区二区| 亚洲精品一区二区三区不卡| 亚洲一区二区色黄大片| 蜜桃午夜精品一区二区三区| 午夜最新福利在线视频| 亚洲精品黄色片中文字幕| 日本一本一道高清不卡视频| 欧美日韩久久亚洲精品| 欧美久久精品在线观看| 亚洲乱码一区二区在线| 亚洲综合日韩精品在线| a一级成人插少妇的逼| 国产黄片大秀在线观看| 国产成人精品手机在线观看| 日韩三级视频一区二区| 啪啪视频日韩一区二区| 精品欧美国产日韩在线观看| 成年女人毛片免费观看不卡| 在线免费观看国产不卡| 成人嚼牙特别黑黄怎么办| 亚洲一区欧美日韩91| 日韩在线视频精品一区| 亚洲黄色成人在线观看| 色婷婷亚洲婷婷亚洲最大| 国产精品精品国产色婷婷| 国产精品福利午夜在线观看| 日本少妇熟女一区二区| 中文字幕人妻久久精品一区| 国产亚洲综合区成人国产| 国产免费av高清在线| 91欧美精品午夜性色福利|