<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          HTML5 Canvas繪圖基本使用方法, H5使用Canvas繪圖

          時間:?2017-11-17閱讀:?1052標簽:?canvas
          Canvas 是H5的一部分,允許腳本語言動態渲染圖像。Canvas 定義一個區域,可以由html屬性定義該區域的寬高,javascript代碼可以訪問該區域,通過一整套完整的繪圖功能(API),在網頁上渲染動態效果圖。  


          二、Canvas 能做什么

          游戲:毫無疑問,游戲在HTML5領域具有舉足輕重的地位。HTML5在基于Web的圖像顯示方面比Flash更加立體、更加精巧。

          圖表制作:圖表制作時常被人們忽略,但無論企業內部還是企業間交流合作都離不開圖表。現在一些開發者使用HTML/CSS完成圖標制作。當然,使用SVG(可縮放矢量圖形)來完成圖表制作也是非常好的方法。

          字體設計:對于字體的自定義渲染將完全可以基于Web,使用HTML5技術進行實現。

          圖形編輯器:圖形編輯器能夠100%基于Web實現。

          其他可嵌入網站的內容:類似圖表、音頻、視頻,還有許多元素能夠更好地與Web融合,并且不需要任何插件。


          三、Canvas基本用法

          1.使用<canvas>必須先設置其width和height屬性,指定可繪圖區域大小,只指定寬高不添加樣式或者繪制圖像的話,在頁面中將看不到該元素。

          <canvas id='draw' width='200px' height='200px'></canvas>


          2 .繪制圖像的話,我們首先要取到canvas并調用getContext()方法,然后傳入上下文名字(2D/3D),2D有兩種基本繪圖操作|填充(fillStyle)|描邊(strokeStyle)|,這兩個屬性默認值為#000

          var draw = document.getElementById('draw');
          //確認瀏覽器是否支持<canvas>元素
          if(draw.getContext){    
              var context = draw.getContext('2d');
              //給context繪制紅色的邊框
              context.strokeStyle = '#f00';    
              //內部填充大草原的顏色
              context.fillStyle = '#0f0';
          }


          3 .使用toDataURL()方法,可以導出<canvas>元素上繪制的圖像

          var draw = document.getElementById('draw');
          if(draw.getContext){    
              //顯示圖像,toDataURL()獲取到的是一串base64的字符串
              var drawURL = draw.toDataURL('image/png');
              var image = document.createElement('img');
              image.src = drawURL;
              document.body.appendChild(image);           
          }


          4 .繪制矩形,主要有三個方法,fillRect()為矩形填充顏色、strokeRect()為矩形描邊、clearRect()清除矩形。這三個方法都接收4個參數x/y/w/h,矩形的左上角坐標和寬高

          var draw = document.getElementById('draw');
          //確認瀏覽器是否支持<canvas>元素
          if(draw.getContext){    
              var context = draw.getContext('2d');
              
              //繪制紅色矩形,綠色描邊
              context.fillStyle = '#f00';
              context.strokeStyle = '#0f0';
              context.strokeRect(10,10,50,50);
              context.fillRect(10,10,50,50);
              
              //繪制綠色矩形,紅色描邊
              context.fillStyle = '#0f0';
              context.strokeStyle = '#f00';
              context.strokeRect(10,10,50,50);
              context.fillRect(10,10,50,50);
              
              //在兩個矩形重疊的地方清除一個小矩形
              context.clearRect(40,40,10,10);
          }


          5 .繪制路徑,通過路徑可以創造出復雜的形狀和線條,要繪制路徑,首先要調用beginPath()方法,再通過以下方法來實際的繪制路徑

          arc(x,y,radius,startAngle,endAngle,conterclockwise)
          (x,y)圓心坐標、radius半徑、(startAngle,endAngle)起始角度和終止角度、conterclockwise順時針(false)/逆時針(true)
          
          moveTo(x,y) 將游標移動到(x,y),不畫線。可以用來修改所謂的上一點坐標*
          
          arcTo(x1,y1,x2,y2,radius)
          從上一點開始繪制一條曲線到(x2,y2),并且以給定的radius穿過(x1,y1)
          
          lineTo(x,y) 從上一點開始繪制一條直線,到(x,y)
          
          rect(x,y,width,height)
          從(x,y)開始繪制一個矩形,寬高為width、height。這個方法繪制的是矩形路徑,而非strokeRect()和fillRect()所繪制的獨立的形狀
          
          //接下來繪制一個不帶數字的時鐘  
          var draw = document.getElementById('draw');
          if(draw.getContext){
              var context = draw.getContext('2d');
              //開始路徑
              context.beginPath();
              //繪制外圓
              context.arc(100,100,99,0,2*Math.PI,false);
              //繪制內圓
              context.moveTo(194,100);
              context.arc(100,100,94,0,2*Math.PI,false);
              //繪制分針
              context.moveTo(100,100);
              context.lineTo(100,15);
              //繪制時針
              context.moveTo(100,100);
              context.lineTo(35,100);
              //描邊路徑
              context.stroke();
              context.strokeStyle = '#f00';            
          }


          6 . 繪制文本,主要有兩個方法,fillText(),strokeText(),都接收四個參數|text(要繪制的文本)|x|y|最大像素寬度(可選)|,這兩個方法都已下列三個屬性為基礎

           font文字樣式,大小,字體等
           textAlign 文本對其方式|start|end|left|right|center|
           textBaseline 文本的基線|top|hanging|middle|alphabetic|ideographic|bottom|      
           
           //在表盤繪制12點
           context.font = 'bold 12px Arial';
           context.textAlign = 'center';
           context.textBaseline = 'middle';
           context.fillText('12',100,20);  


          7 . 變換

           rotate(angel) 圍繞原點旋轉圖像angle弧度
           scale(scaleX,scaleY) 縮放圖像,x*scaleX,y*scaleY  默認1
           translate(x,y) 將坐標原點移動到(x,y)
           
           var draw = document.getElementById('draw');
           if(draw.getContext){
              var context = draw.getContext('2d');
              //開始路徑
              context.beginPath();
              //繪制外圓
              context.arc(100,100,99,0,2*Math.PI,false);
              //繪制內圓
              context.moveTo(194,100);
              context.arc(100,100,94,0,2*Math.PI,false);
              //變換原點
              context.translate(100,100);
              //旋轉表針
              context.rotate(1)
              //繪制分針
              context.moveTo(0,0);
              context.lineTo(0,-85);
              //繪制時針
              context.moveTo(0,0);
              context.lineTo(-65,0);
              //描邊路徑
              context.stroke();
              context.strokeStyle = '#f00';            
          }    


          8 . 繪制圖像,drawImage()

           var img = document.getElementByTagNames('image')[0];
           context.drawImage(img,0,10,50,50,0,100,40,60);
           9個參數: 要繪制的圖像 原圖像|x|y|w|h|  目標圖像|x|y|w|h|


          9 . 陰影和漸變

           陰影主要是以下幾個屬性值
           shadowColor
           shadowOffsetX : X軸陰影偏移量
           shadowOffsetY : Y軸陰影偏移量
           shadowBlur : 模糊像素數,默認0,不模糊
           
           var context = draw.getContext('2d');
           //設置陰影
           context.shadowColor = 'rgba(210,210,210,.5)';
           context.shadowOffersetX = '5';
           
           漸變 創建一個新的線性漸變 createLinearGradient()方法,有四個參數|x1|y1|x2|y2|分別為起點的坐標和終點的坐標
           var gradient = context.createLinearGradient(30,30,70,70);
           gradient.addColorStop(0,'#fff');    //0表示開始
           gradient.addColorStop(1,'#000');    //1表示結束
           //使用定義好的漸變屬性
           context.fillStyle = gradient;    //填充的時候放入漸變
           context.fillRect(30,30,50,50);
           
           創建一個放射漸變 createRadialGradient(),六個參數|x1|y2|radius1|x2|y2|radius2|分別為第一個圓心和半徑第二個圓心和半徑,用法和線性漸變相同


          10 . 使用圖像數據,可以通過getImageData()取得原始圖像數據。四個參數|x|y|w|h|。每個ImageData對象有三個屬性,width/height/data,data是一個數組,內部存著每一個像素的數據,每個元素的值介于0-255之間

           var imgdata = context.getImageData(0,0,100,100);
           var data = imgdata.data,
               red = data[0],
               green = data[1],
               blue = data[2],
               alpha = data[3];
            
          //實現一個灰色過濾器
          var draw = document.getElementById('draw');
          if(draw.getContext){
              var context = draw.getContext('2d');
              var img = document.getElementsByTagName('image')[0],
                  imageData,data,
                  i,len,average,
                  red,green,blue,alpha;
              //繪制原始圖像
              context.drawImage(img,0,0,100,100);
              //獲取圖像數據
              imageData = context.getImageData(0,0,img.width,img.height);
              data = imageData.data;
              for(i=0,len=data.length;i<len;i+=4){
                  red = data[i];
                  green = data[i+1];
                  blue = data[i+2];
                  alpha = data[i+3];
                  //計算rgb的平均值
                  average = Math.floor((red+green+blue)/3);
                  //設置顏色值
                  data[i] = average;
                  data[i+1] = average;
                  data[i+2] = average;
              }   
              imageData.data = data;
              //把數據繪制在畫布
              context.putImageData(imageData,0,0)
          }
          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/122

          Canvas基本圖片操作與處理

          Canvas是H5中新增的技術,主要運用在圖片的處理和動畫的繪制上,隨著Canvas的使用場景越來越多,了解Canvas對平時開發大有裨益,這篇文章將介紹Canvas基本圖片操作與處理

          利用 canvas 與 Data URLs 安全地下載一張圖片

          普通用戶下載圖片時只需一個「右鍵另存為」操作即可完成,但當我們做在線編輯器、整個 UI 都被自定義時,要如何賦予用戶一個安全下載頁面中圖片功能的能力呢?最簡單的辦法,當然是利用 <a> 標簽。根據 MDN 描述

          Canvas接口和動畫效果大全

          <canvas>元素用于生成圖像。它本身就像一個畫布,JavaScript 通過操作它的 API,在上面生成圖像。它的底層是一個個像素,基本上<canvas>是一個可以用 JavaScript 操作的位圖(bitmap)

          小程序中canvas實現水平、垂直居中

          最近做一個刮刮卡,需要將文字在canvas中水平、垂直居中;fillText方法為canvas設置文本方法,使用如下所示;上例將文本內容設置在canvas畫布的坐標位置上,跳脫web的開發思維,我們可以認為X點相對于文本有左

          javascript實例教程:使用canvas技術模仿echarts柱狀圖

          canvas 畫布是HTML5中新增的標簽,可以通過js操作 canvas 繪圖 API在網頁中繪制圖像。百度開發了一個開源的可視化圖表庫ECharts,功能非常強大,可以實現折線圖、柱狀圖、散點圖、餅圖、K線圖、地圖等多種圖表。

          canvas.toDataURL()報錯的解決方案全都在這了

          最近在做一個創意類的圖片合成工具,大概齊就是通過拼接自定義的文字和圖片信息生成一張商品圖片類似的功能,項目中用到了fabric.js這個畫板庫,最后一步在保存圖片的時候報上面的一長串錯誤,墻內墻外搜了一遍

          OffscreenCanvas離屏canvas使用說明

          OffscreenCanvas 是一個實驗中的新特性,主要用于提升 Canvas 2D/3D 繪圖的渲染性能和使用體驗。OffscreenCanvas 的 API 很簡單,但是要真正掌握好如何使用。OffscreenCanvas和canvas都是渲染圖形的對象

          淺談使用canvas繪制多邊形

          本文主要使用坐標軸的使用來繪制多邊形,點位則都是在y軸上尋找,這種方法能夠更好的理解圖形與修改。id為html里canvas標簽的屬性id;x,y為坐標軸的起始位置,因為canvas默認坐標軸在左上角

          監聽Canvas內部元素點擊事件的三種方法

          canvas內部元素不能像DOM元素一樣方便的添加交互事件監聽,因為canvas內不存在“元素”這個概念,他們僅僅是canvas繪制出來的圖形。這對于交互開發來說是一個必經障礙,想要監聽圖形的點擊事件思路很簡單

          canvas旋轉畫筆

          canvas旋轉畫筆,可以使用rotate方法,rotate方法是繞著中心點旋轉的,中心點默認是左上角的(0,0)位置,可以使用translate方法改變旋轉的中心點,下面介紹兩種方法旋轉,可以根據自己的需求使用,關鍵是理解旋轉的原理

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网