整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          熬夜總結(jié)了“HTML5畫布”的知識點(共10條)

          謝哪吒的投稿

          前言

          html5Canvas的知識點,是開發(fā)的必備技能,在實際工作中也常常會涉及到。

          最近熬夜總結(jié)html5Canvas相關(guān)的知識點,大家一起看一下吧:

          1.html5Canvas基礎(chǔ)知識

          • Canvas是什么?翻譯過來是畫布的意思
          • Canvas元素用于在網(wǎng)頁上繪制2D圖形和圖像

          Canvas使用的場景有:1,動畫;2,H5游戲;3,圖表。

          效果動畫,加載Loading:


          H5游戲效果:



          對于Canvas需要掌握:

          1. 使用Canvas畫直線,矩形,圓形以及設(shè)置它們的樣式。
          2. Canvas中的圖形變換,漸變,文字和圖片
          3. Canvas的像素獲取,陰影和曲線繪制以及區(qū)域的剪輯
          4. Canvas動畫,交互和離屏技術(shù)。


          Canvas坐標(biāo)體系

          • canvas默認(rèn)大小,300*150
          • 通過HTML,css,JavaScript設(shè)置width和height的區(qū)別
          • HTML和JavaScript設(shè)置的畫布大小
          • css設(shè)置的是畫布縮放后的大小
          • 坐標(biāo)系原點及方向(原點在左上角,向右為x方向,向下為y方向)

          畫直線,矩形和原型

          • 畫直線:ctx.moveTo(x1,y1),ctx.lineTo(x2,y2)
          • 畫圓形: ctx.arc(x,y,radius,0,Math.PI*2,true)
          • 畫矩形:可以通過直線來畫,也可以直接用(ctx.strokeRect(x1,y1,x2,y2)

          beginPath和closePath

          1. beginPath和closePath并不是成對出現(xiàn)的
          2. beginPath的作用是開始一條新路徑
          3. closePath的作用是使當(dāng)前路徑閉合

          描邊和填充樣式

          1. strokeStyle用來設(shè)置畫筆樣式,也就是直線,曲線,邊框的樣式
          2. fillStyle用來設(shè)置 填充樣式
          3. lineWidth用來設(shè)置線條的粗細(xì)

          Canvas中的圖形變換,漸變,文字和圖片

          1. Canvas中的圖像變換
          2. Canvas中的漸變
          3. Canvas中的文字
          4. Canvas中的圖片

          Canvas中的圖形變換

          圖形變換都是針對坐標(biāo)系來說的:

          • 平移:ctx.translate(x,y)
          • 旋轉(zhuǎn):ctx.rotate(rad)
          • 縮放:ctx.scale(x,y)

          save和restore

          用來保存和恢復(fù)上下文的環(huán)境ctx,一般成對出現(xiàn)

          • ctx.save(),保存當(dāng)前上下文環(huán)境。
          • ctx.restore(),恢復(fù)到上一次的上下文環(huán)境

          Canvas中的漸變

          1. 線性漸變:ctx.createLinearGradient(xStart,yStart,xEnd,yEnd)

          (xStart,yStart)是線段的起點,(xEnd,yEnd)是線段終點。起點到終點之間的顏色呈漸變。

          1. gradient.addColorStop可以來控制漸變的顏色
          2. 漸變可以理解為一種顏色
          3. 徑向漸變:

          ctx.createRadialGradient(xStart,yStart, radiusStart,xEnd,yEnd,radiusEnd);

          (xStart,yStart)是第一個圓的原心,radiusStart是第一個圓的半徑,(xEnd,yEnd)是第二個圓的原心,radiusEnd是第二個圓的半徑

          第一圓到第二個圓之間的顏色呈現(xiàn)漸變。

          Canvas中的文字

          描邊文字:ctx.strokeText(text,x,y)

          填充文字:ctx.fillText(text,x,y);

          設(shè)置字體樣式:ctx.font

          • 例如:ctx.font="bold 100px sans-serif"
          • 設(shè)置水平對齊方式:ctx.textAlign
          • left,start,左對齊,center居中對齊,end,right,右對齊

          設(shè)置垂直對齊方式:ctx.textBaseline

          • top,頂對齊,middle,居中,bottom,底部對齊
          • 計算文本寬度:ctx.measuerText(text).width 須在設(shè)置字體樣式之后計算

          Canvas圖片

          繪制圖片3種方法

          • ctx.drawImage(image,x,y),該方法把圖片繪制在(x,y)處
          • ctx.drawImage(image,x,y,w,h),該方法把圖片繪制在(x,y)處,并縮放為寬w,高h(yuǎn)
          • ctx.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh),該方法把圖片中(sx,sy)處的寬sw,高sh的區(qū)域,繪制到(dx,dy)處,并縮放為寬dw,高dh


          在image加載完成之后繪制:


          示例:

          var img = new Image();img.src = 'logo.png';img.onload = function() {    ctx.drawImage(img,0,0,40,40,0,0,80,80);}

          Canvas繪制

          • Canvas的圖形繪制和像素獲取
          • Canvas陰影繪制
          • Canvas剪輯區(qū)域
          • Canvas曲線繪制

          Canvas圖形畫刷

          ctx.createPattern可以創(chuàng)建一個畫刷模式,進而可以設(shè)置到fillStyle里,進行畫刷的填充。

          • 函數(shù)原型:ctx.createPattern(image,type)

          type取值:

          • no-repeat不平鋪
          • repeat-x橫方向平
          • repeat-y縱方向平鋪
          • repeat全方向平鋪

          Canvas像素操作

          1. 獲取像素
          var imageData = ctx.getImageData(x,y,w,h)返回的是一維數(shù)組:[r1,g1,b1,a1,r2,g2,b2,a2...]
          1. 設(shè)置像素
          ctx.putImageData(imageData,x,y)把imageData放在(x,y)處
          1. 設(shè)置像素
          ctx.putImageData(imageData, x, y, dirtyX, dirtyY, dirtyW, dirtyH)只顯示(dirtyX,dirtyY)處的寬dirtyW,dirtyH的區(qū)域

          Canvas陰影繪制

          1. ctx.shadowOffsetX:陰影x方向的偏移距離
          2. ctx.shadowOffsetY:陰影y方向的偏移距離
          3. ctx.shadowColor:陰影的顏色
          4. ctx.shadowBlur:陰影的模糊半徑效果圖:

          Canvas剪輯區(qū)域

          1. 設(shè)置一個路徑;
          2. 調(diào)用ctx.clip();
          3. 再繪制圖形。

          Canvas繪制曲線

          狐線:

          context.arc(x,y,radius, starAngle,endAngle, anticlockwise)圓心(x,y)  半徑radius從starAngle到endAngleanticlockwise代表是否逆時針方向

          生成工具

          Canvas Quadratic Curve Example

          http://blogs.sitepointstatic.com/examples/tech/canvas-curves/quadratic-curve.html

          http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html

          二次樣條曲線:

          context.quadraticCurveTo(qcpx,qcpy, qx,qy)

          貝塞爾曲線:

          context.bezierCurveTo(cp1x,cp1y, cp2x, cp2y, x,y)
          • Canvas動畫,Canvas離屏技術(shù)
          1. ctx.clearRect(x,y, width,height)


          清除(x,y)點起, 寬width,高h(yuǎn)eight的區(qū)域,用于重新繪制


          離屏技術(shù)是什么:通過在離屏Canvas中繪制元素,再復(fù)制到顯示Canvas中,從而大幅提高性能的一種技術(shù)。


          使用離屏技術(shù):


          • 靜態(tài)場景繪制特別耗資源,動態(tài)場景繪制簡單。為了不每次更新動態(tài)場景的時候,都去繪制靜態(tài)場景。
          • 一般把靜態(tài)場景繪制在離屏canvas上,更新動態(tài)場景的時候,把靜態(tài)場景copy過來,而不是重新繪制。

          離屏技術(shù):

          一個Canvas中的圖形繪制到另一個Canvas方法:

          ctx.drawImage(canvas,x,y),該方法把canvas繪制在(x,y)處ctx.drawImage(canvas,x,y, w,h),該方法把canvas繪制在(x,y)處,并縮放為寬w,高h(yuǎn)ctx.drawImage(canvas, sx, sy, sw, sh, dx, dy, dw, dh),該方法把canvas中(sx, sy)處的寬sw,高sh的區(qū)域,繪制到(dx,dy)處,并縮放為寬dw, 高dh

          對canvas插件的相關(guān)了解

          什么是Canvas插件,掌握Chart.js插件,了解Chartist.js和HighCharts.js插件

          (圖表)Chart.js插件:https://www.chartjs.org/

          Chartist.js插件是一個簡單的響應(yīng)式圖表插件:支持SVG格式(http://gionkunz.github.io/chartist-js/)

          HighCharts.js插件:方便快捷的HTML5交互性圖標(biāo)庫:https://www.highcharts.com/

          Chartist.js插件與HighCharts.js插件

          • Chartist.js配置簡單,css和JavaScript分離,響應(yīng)式圖表,支持不同的瀏覽器尺寸和分辨率。
          • HighCharts.js,兼容當(dāng)今所有的瀏覽器,包含iPhone,IE,火狐等。

          響應(yīng)式布局,它的用戶體驗友好,響應(yīng)式網(wǎng)站可以根據(jù)不同終端,不同尺寸和不同應(yīng)用環(huán)境,自動調(diào)整界面布局,展示內(nèi)容,提供非常好的視覺效果。響應(yīng)式布局就是一個網(wǎng)站能夠兼容多個終端

          2. 構(gòu)建Canvas元素

          示例:

          <style>#canva {    border: 1px solid red;}</style><div><canvas id="canva" width="200" height="200"></canvas>// 繪制寬高200的canvas</div>
          1. 使用JavaScript實現(xiàn)繪圖的流程

          在開始繪圖時,先要獲取Canvas元素的對象,在獲取一個繪圖的上下文。

          獲取Canvas對象 ,使用document對象的getElementById()方法獲取。

          var canvas = document.getElementById("canvas")可以使用通過標(biāo)簽名稱來獲取對象的getElementsByTagName方法
          1. 創(chuàng)建二維的繪圖上下文對象

          使用getContext()方法來獲取

          var context  = canvas.getContext("2d")
          1. 在Canvas上繪制文字
          context.font="98px 黑體"; // 文字樣式context.fillStyle="red"; // 文字顏色context.textAlign = "center"; // 文字對齊方式// 繪制文字context.fillText("達(dá)達(dá)前端",100, 123, 234);


          繪制圖像:


          使用drawImage()方法可以將圖像添加到Canvas畫布中,繪制一幅圖像,需要有三個重載的方法:

          使用:

          drawImage(image, x, y) // 在畫布上定位圖像// 方法在畫布上繪制圖像、畫布或視頻。// 方法也能夠繪制圖像的某些部分,以及/或者增加或減少圖像的尺寸。drawImage(image, x, y, width, height)// 在畫布上定位圖像,并規(guī)定圖像的寬度和高度drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)// 剪切圖像,并在畫布上定位被剪切的部分

          參數(shù):

          參數(shù)描述image規(guī)定要使用的圖像,畫布或視頻sourceX開始剪切的x坐標(biāo)位置sourceY開始剪切的y坐標(biāo)位置sourceWidth被剪切圖像的寬度sourceHeight被剪切圖像的高度destX在畫布上放置圖像的 x 坐標(biāo)位置destY在畫布上放置圖像的 y 坐標(biāo)位置destWidth要使用的圖像的寬度destHeight要使用的圖像的高度

          插入圖像:

          function Draw() {    // 獲取canvas對象    var canvas = document.getElementById("canvas");     // 獲取2d上下文繪圖對象    var context = canvas.getContext("2d");     // 使用Image()構(gòu)造函數(shù)創(chuàng)建圖像對象    var newImg = new Image();     // 指定圖像的文件地址    newImg.src = "../images/dadaqianduan.jpg";     newImg.onload = function () {        // 左上角開始繪制圖像        context.drawImage(newImg, 0, 0);         context.drawImage(newImg, 250, 100, 150, 200);         context.drawImage(newImg, 90, 80, 100, 100, 0, 0, 120, 120);    }}

          在Canvas中繪制文字“達(dá)達(dá)前端”:

          // canvas 寬高200<canvas id="canvas" width="200" height="200"></canvas><style type="text/css">canvas {    border: 2px solid #ccc;}</style><script>    // 獲取canvas    var canvas = document.getElementById("canvas");    var context = canvas.getContext("2d");    // 設(shè)置字體    context.font="98px 黑體";    // 填充    context.fillStyle="#036";    // 文本水平位置    context.textAlign="center";    // 執(zhí)行繪制    context.fillText("達(dá)達(dá)前端",100, 120, 200);</script>

          3.繪制矩形

          兩個方法:

          1. strokeRect() - 矩形邊框
          2. fillRect() - 填充矩形區(qū)域
          3. strokeStyle - 設(shè)置線條的顏色
          4. lineWidth - 設(shè)置線條寬度,默認(rèn)寬度為1,單位是像素
          5. fillStyle - 設(shè)置區(qū)域或文字的填充顏色

          繪制矩形邊框,使用strokeStyle方法:

          // 繪制矩形邊框strokeRect(x,y, width, height);

          填充矩形區(qū)域,使用fillRect()方法:

          // 填充矩形區(qū)域fillRect(x,y,width,height);

          繪制矩形

          // 繪制矩形function drawRect() {    var canvas = document.getElementById("canvas");    var context = canvas.getContext("2d");    // 描邊    context.strokeStyle = "#000";    // 線條寬度    context.lineWidth = 1;    // 矩形邊框    context.strokeRect(50,50, 150, 100);    // 填充    context.fillStyle="#f90";    // 矩形    context.fillRect(50,50,150,100);}window.addEventListener("load",DrawRect,true);

          使用clearRect方法,可以擦除指定的矩形區(qū)域:

          // 擦除指定的矩形區(qū)域context.clearRect(x,y,width,height)

          4.體驗canvas繪圖

          在實際開發(fā)中,畫布是默認(rèn)300*150的大小。

          示例:

          // 為畫布設(shè)置邊框canvas {    border: 1px solid #ccc;}// 準(zhǔn)備畫布,默認(rèn)是300*150// 設(shè)置畫布的大小<canvas width="1200" height="800"></canvas>// 準(zhǔn)備繪制工具<script>// 獲取元素var myCanvas = document.querySelector('canvas');// 獲取上下文,繪制工具箱var ctx = myCanvas.getContext('2d');// 移動畫筆ctx.moveTo(100,100);// 繪制直線,軌跡ctx.lineTo(200,100);// 描邊ctx.stroke()

          創(chuàng)建Canvas元素

          向 HTML5 頁面添加 canvas 元素

          // 規(guī)定元素的 id、寬度和高度<canvas id="myCanvas" width="200" height="100"></canvas>

          圖形繪制


          需要理解些概念:

          • 路徑的概念
          • 路徑的繪制
            • 描邊 stroke()
            • 填充 fill()
          • 閉合路徑
            • 手動閉合
            • 程序閉合 closePath()
          • 開啟新的路徑 beginPath()

          設(shè)置樣式


          • 畫筆的狀態(tài)
            • lineWidth 線寬,默認(rèn)1px
            • lineCap 線末端類型:(butt默認(rèn))、round、square
            • lineJoin 相交線的拐點 miter(默認(rèn))、round、bevel
            • strokeStyle 線的顏色
            • fillStyle 填充顏色
            • setLineDash() 設(shè)置虛線
            • getLineDash() 獲取虛線寬度集合
            • lineDashOffset 設(shè)置虛線偏移量(負(fù)值向右偏移)

          矩形繪制

          • rect(x,y,w,h) 沒有獨立路徑
          • strokeRect(x,y,w,h) 有獨立路徑,不影響別的繪制
          • fillRect(x,y,w,h) 有獨立路徑,不影響別的繪制
          • clearRect(x,y,w,h) 擦除矩形區(qū)域

          圓弧繪制


          • 弧度概念
          • arc()
            • x 圓心橫坐標(biāo)
            • y 圓心縱坐標(biāo)
            • r 半徑
            • startAngle 開始角度
            • endAngle 結(jié)束角度
            • anticlockwise 是否逆時針方向繪制(默認(rèn)false表示順時針;true表示逆時針)

          繪制文本


          • ctx.font = '微軟雅黑' 設(shè)置字體
          • strokeText()
          • fillText(text,x,y,maxWidth)
            • text 要繪制的文本
            • x,y 文本繪制的坐標(biāo)(文本左下角)
            • maxWidth 設(shè)置文本最大寬度,可選參數(shù)
          • ctx.textAlign 文本水平對齊方式,相對繪制坐標(biāo)來說的
            • left
            • center
            • right
            • start 默認(rèn)
            • end
          • ctx.direction 屬性css(rtl ltr) start和end于此相關(guān)
            • 如果是ltr,start和left表現(xiàn)一致
            • 如果是rtl,start和right表現(xiàn)一致
          • ctx.textBaseline 設(shè)置基線(垂直對齊方式 )
            • top 文本的基線處于文本的正上方,并且有一段距離
            • middle 文本的基線處于文本的正中間
            • bottom 文本的基線處于文本的證下方,并且有一段距離
            • hanging 文本的基線處于文本的正上方,并且和文本粘合
            • alphabetic 默認(rèn)值,基線處于文本的下方,并且穿過文字
            • ideographic 和bottom相似,但是不一樣
          • measureText() 獲取文本寬度obj.width

          繪制圖片


          • drawImage()
            • img 圖片對象、canvas對象、video對象
            • x,y,w,h 圖片中的一個矩形區(qū)域
            • x1,y1,w1,h1 畫布中的一個矩形區(qū)域
            • img 圖片對象、canvas對象、video對象
            • x,y 圖片繪制的左上角
            • w,h 圖片繪制尺寸設(shè)置(圖片縮放,不是截取)
            • img 圖片對象、canvas對象、video對象
            • x,y 圖片繪制的左上角
            • 三個參數(shù)drawImage(img,x,y)
            • 五個參數(shù)drawImage(img,x,y,w,h)
            • 九個參數(shù)drawImage(img,x,y,w,h,x1,y1,w1,h1)

          坐標(biāo)變換


          • 平移 移動畫布的原點
            • translate(x,y) 參數(shù)表示移動目標(biāo)點的坐標(biāo)
          • 縮放
            • scale(x,y) 參數(shù)表示寬高的縮放比例
          • 旋轉(zhuǎn)
            • rotate(angle) 參數(shù)表示旋轉(zhuǎn)角度

          5.使用路徑

          1. lineTo()
          2. rect()
          3. arc()
          4. fill()
          5. stroke()

          創(chuàng)建繪圖路徑

          使用方法:beginPath()和closePath(),分別表示開始一個新的路徑和關(guān)閉當(dāng)前的路徑

          1. 使用beginPath()方法創(chuàng)建一個新的路徑
          2. moveTo(x,y),開始繪圖時的坐標(biāo)
          3. lineTo(x,y),繪制直線到目標(biāo)坐標(biāo)
          4. arc(x,y, radius, startAngle,endAngle, counterclockwise)
          • x,y描述弧的圓形的圓心坐標(biāo)
          • radius圓形的半徑
          • startAngle描述弧的開始點的角度
          • endAngle描述弧的結(jié)束點的角度
          • counterclockwise,true值,表示逆時針方向,否則反之
          1. rect(x,y, width, height):xy,起點坐標(biāo),矩形的寬高,繪制矩形路徑

          closePath方法關(guān)閉當(dāng)前路徑

          繪制圖形樣式

          1. stokeStyle 屬性設(shè)置矩形邊框的顏色
          2. lineWidth 屬性設(shè)置邊框的寬度
          3. fillStyle 屬性設(shè)置填充的顏色

          繪制網(wǎng)格,網(wǎng)格大小

          var grid = 10;// 畫多少條x軸方向的線,橫向的條數(shù),畫布的高度var canvasHeight = myCanvas.heightvar canvasWidth = myCanvas.width// 畫布寬高ctx.canvas.widthctx.canvas.height// 網(wǎng)格大小var gridSize = 10;var canvasHeight = ctx.canvas.height;var xLineTotal = canvasHeight / gridSize// 總線條var xLineTotal = Math.floor(canvasHeight / gridSize);for (var i=0; i<=xLineTotal; i++) {    ctx.beginPath();    ctx.moveTo(0, i*gridSize-0.5);    ctx.lineTo(canvasWidth, i*gridSize-0.5);    ctx.strokeStyle='#eee';    ctx.stroke();}// 畫多少條y軸方向的線var yLineTotal = canvasWidth / gridSizevar yLineTotal = Math.floor(canvasWidth / gridSize);for (var i=0; i <= yLineTotal; i++) {    ctx.beginPath();    ctx.moveTo(i*gridSize-0.5,0);    ctx.lineTo(i*gridSize-0.5,canvasHeight);    ctx.strokeStyle='#eee';    ctx.stroke();}

          繪制坐標(biāo)系,確定圓點,確定離畫布旁邊的距離,確定坐標(biāo)軸的長度,確定箭頭的大小,繪制箭頭填充。

          // 繪制坐標(biāo)系var space = 20;var arrowSize = 10;// 畫布寬高var canvasWidth = ctx.canvas.width;var canvasHeight = ctx.canvas.height;// 坐標(biāo)系var x0 = space;var y0 = canvasHeight - space;// 繪制x軸ctx.moveTo(x0,y0);ctx.lineTo(canvasWidth-space, y0);ctx.stroke();// 箭頭ctx.lineTo(canvasWidth-space-arrowSize, y0 + arrowSize/2);ctx.lineTo(canvasWidth-space-arrowSize, y0 - arrowSize/2);ctx.lineTo(canvasWidth-space, y0);ctx.fill();ctx.stroke();// 繪制y軸ctx.beginPath();ctx.moveTo(x0, y0);ctx.lineTo(space, space);ctx.stroke();// 箭頭ctx.lineTo(space+space-arrowSize/2, space + arrowSize);ctx.lineTo(space-space-arrowSize/2, space - arrowSize);ctx.lineTo(space, space);ctx.fill();ctx.stroke();// 繪制點var coordinate = {    x: 146,    y: 356}// 點尺寸var dottedSize = 6;ctx.moveTo(coordinate.x - dottedSize/2, coordinate.y - dottedSize/2);ctx.lineTo(coordinate.x + dottedSize/2, coordinate.y - dottedSize/2);ctx.lineTo(coordinate.x + dottedSize/2, coordinate.y + dottedSize/2);ctx.lineTo(coordinate.x - dottedSize/2, coordinate.y + dottedSize/2);ctx.closePath();ctx.fill();

          arc方法和rect方法


          arc創(chuàng)建一個圓形,rect創(chuàng)建一個矩形,最后調(diào)用stroke()方法和fill()方法

          // 圓形context.arc(100,100,30,0,Math.PI*2,true);

          使用beginPath()方法可以新創(chuàng)建一個子路徑,closePath()方法用來閉合路徑的。

          繪制兩條直線

          function DrawLine() {    var canvas = document.getElementById("canvas");    var context = canvas.getContext("2d");    // 創(chuàng)建繪制過程    context.beginPath();    context.moveTo(50,50);    context.lineTo(120,120);    context.lineTo(120,60);    context.closePath();    context.strokeStyle="#000";    // 執(zhí)行繪制    context.stroke();}
          • beginPath() 方法開始一條路徑,或者重置當(dāng)前的路徑
          • closePath() 方法創(chuàng)建從當(dāng)前點到開始點的路徑

          如果不用beginPath()方法,繪制圖形時不再創(chuàng)建子路徑,第一次的圖形在執(zhí)行過程中會被繪制填充兩次。

          圖形組合

          屬性 globalCompositeOperation 設(shè)置如何在畫布上組合顏色

          12中組合類型:

          值說明copy只繪制新圖形,刪除其他所有內(nèi)容darker在圖形重疊的地方,顏色由兩個顏色值相減后決定destination-atop已有的內(nèi)容只在它和新的圖形重疊的地方保留,新圖形繪制在內(nèi)容后destination-in在新圖形和已有畫布重疊的地方,已有內(nèi)容都保留,所有其他內(nèi)容成為透明destination-out在新圖形和已有內(nèi)容不重疊的地方,已有內(nèi)容保留所有其他內(nèi)容成為透明destination-over新圖形繪制于已有內(nèi)容的后面lighter在圖形重疊的地方,顏色由兩種顏色值的疊加值來決定source-atop只在新圖形和已有內(nèi)容重疊的地方才繪制新圖形source-in在新圖形和已有內(nèi)容重疊的地方,新圖形才會被繪制,所有其他內(nèi)容成為透明source-out只在和已有圖形不重疊的地方繪制新圖形source-over新圖形繪制于已有圖形的頂部xor在重置和正常繪制的其他地方,圖形都成為透明

          繪制曲線

          // 圓形,曲線arc(x, y, radius, startAngle, endAngle, counterclockwise);
          • x,y 表示弧的圓形的圓心坐標(biāo)
          • radius 表示弧的圓形的半徑
          • startAngle 表示圓弧的開始點的角度
          • endAngle 表示圓弧的結(jié)束點的角度
          • counterclockwise 若true表示逆時針,false反之順時針
          <style>// 畫布背景顏色#canvas {    background: #000;}</style>// 畫布寬度400<canvas id="canvas" width="400" height="400"><script> var canvas = document.getElementById('canvas'); var context= canvas.getContext('2d') // 開始 context.beginPath(); // 繪制圓形 context.arc(100, 100, 50, 0, Math.PI*2, true); // 關(guān)閉 context.closePath(); // 填充顏色 context.fillStyle = 'rgb(255,255,255)'; context.fill();</script>

          如果使用css設(shè)置寬高,畫布會按照300*150的比例進行縮放,將300*150的頁面顯示在400*400的容器中。

          // 設(shè)置畫布寬度var cx = canvas.width = 400;var cy = canvas.height = 400;

          使用js動態(tài)設(shè)置寬高。

          建議使用HTML中的width和height,或者js動態(tài)設(shè)置寬高

          創(chuàng)建一個canvas標(biāo)簽,第一步:

          // 獲取這個canvas的上下文對象var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');

          方法:

          • fill() 填充路徑
          • stroke() 描邊
          • arc() 創(chuàng)建圓弧
          • rect() 創(chuàng)建矩形
          • fillRect() 繪制矩形路徑區(qū)域
          • strokeRect() 繪制矩形路徑描邊
          • clearRect() 在給定的矩形內(nèi)清除指定的像素
          • beginPath() 起始一條路徑,或重置當(dāng)前路徑
          • moveTo() 把路徑移動到畫布中的指定點,不創(chuàng)建線條
          • lineTo()添加一個新點,在畫布中創(chuàng)建從該點到最后指定點的線條
          • clip() 從原始畫布剪切任意形狀和尺寸的區(qū)域
          • arcTo() 創(chuàng)建兩切線之間的弧/曲線
          • quadraticCurveTo() 創(chuàng)建二次方貝塞爾曲線
          • bezierCurveTo() 創(chuàng)建三次方貝塞爾曲線
          • isPointInPath() 如果指定的點位于當(dāng)前路徑中,則返回 true,否則返回 false

          輔助線繪制弧線:arcTo() 方法

          語法:

          // 輔助線繪制弧線arcTo(x1, y1, x2, y2, radius)

          arcTo()方法繪制一條弧線

          代碼:

          // 繪制一條弧線function draw() {    var canvas = document.getElementById('canvas');    var context = canvas.getContext('2d');    // 開始繪制    context.beginPath();    // 移動點    context.moveTo(80, 120);    // 繪制線條    context.lineTo(150, 60);    context.lineTo(180, 130);    // 描邊    context.strokeStyle="rgba(0,0,0,0.4)";    context.lineWidth=2;    context.stroke();    context.beginPath();    context.moveTo(80,120);    context.arcTo(150,60,180,130,50);    context.strolkeStyle="rgba(255,135,0,1)";    context.stroke();}

          繪制二次樣條曲線

          quadraticCurveTo()方法:

          quadraticCurveTo(cpX, cpY, x, y);// cpX, cpY描述了控制點的坐標(biāo),x, y描述了曲線的終點坐標(biāo)

          繪制貝濟埃曲線

          bezierCurveTo()方法:它是應(yīng)用于二維圖形應(yīng)用程序的數(shù)學(xué)曲線。

          bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, x, y);// cp1X, cp1Y 表示第一個控制點的坐標(biāo) // cp2X, cp2Y 表示第二個控制點的坐標(biāo) // x, y表示曲線的終點坐標(biāo)

          繪制曲線:

          function draw() {    // 繪制曲線    var canvas = document..getElementById('canvas');    var context = canvas.getContext('2d');    // 開始繪制    context.beginPath();    // 移動    context.moveTo(100,180);    // 連線    context.lineTo(110,80);    context.moveTo(260,100);    context.lineTo(300,200);    // 描邊    context.strokeStyle="rgba(0,0,0,0.4)";    // 設(shè)置寬度    context.lineWidth=3;    context.stroke();    context.beginPath();    context.moveTo(100,180);    // 繪制貝濟埃曲線    context.bezierCurveTo(110,80,260,100,300,200);    // 設(shè)置寬度    context.lineWidth = 3;    context.strokeStyle="rgba(255,135,0,1)";    context.stroke();}

          四分之一圓

          var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');// 畫布寬度200var canX = canvas.width = 200var canY = canvas.height = 200;// 開始繪制context.beginPath();// 四分之一圓context.arc(100, 100, 50, 0, Math.PI*0.5, false);context.strokeStyle="white"context.stroke();context.beginPath();context.lineTo(200, 200);context.lineTo(200, 100);context.lineTo(100,50);context.strokeStyle = '#fff';context.stroke();
          • lineCap 設(shè)置或返回線條的結(jié)束斷點樣式
          • lineJoin 設(shè)置或返回兩條線相交時,產(chǎn)生拐角類型
          • lineWidth 設(shè)置或返回當(dāng)前的線條寬度
          • miterLimit 設(shè)置或返回最大斜接長度
          1. fillRect() 繪制一個實心矩形
          2. strokeRect() 繪制一個空心矩形

          設(shè)置陰影,shadowBlur -context.shadowBlur = 20

          • createLinearGradient() 創(chuàng)建線性漸變
          • createPattern() 在指定的方向上重復(fù)指定的元素
          • createRadialGradient() 創(chuàng)建放射狀/環(huán)形的漸變
          • addColorStop() 規(guī)定漸變對象中的顏色和停止位置
          gradient.addColorStop(stop,color)
          1. scale() 縮放當(dāng)前繪圖變大或變小
          2. rotate() 旋轉(zhuǎn)當(dāng)前繪圖
          3. translate() 重新映射畫布的(0,0)位置

          6.使用圖像

          使用三種方法插入圖像

          function draw() {    var canvas = document.getElementById('canvas');    var context = canvas.getContext('2d');    // image實例    var newImg = new Image();    newImg.src='../images/dada.jpg' // 指定圖像的文件地址    newImg.onload = function(){        // 繪圖        context.drawImage(newImg, 0, 0);        context.drawImage(newImg, 250,100, 150,200);        context.drawImage(newImg, 90,80,100,100,0,0,120,120);    }}

          在插入圖像之前,需要考慮圖像加載的時間,如果圖像沒加載完成就已經(jīng)執(zhí)行drawImage()方法,就不會顯示任何圖片。

          7.繪制漸變

          提供了兩種漸變的創(chuàng)建的方法:

          // 創(chuàng)建線性漸變createLinearGradient()方法// 創(chuàng)建徑向漸變createRadialGradient()方法

          設(shè)置漸變顏色和過渡方式

          語法如下:

          1. offset是一個范圍在0.0到1.0之間的浮點值 表示漸變的開始點和結(jié)束點之間的一部分
          2. offset的0為開始點,1為結(jié)束點
          addColorStop(offset, color);

          繪制線性漸變的矩形

          function draw() {    var canvas = document.getElementById('canvas')    var context = canvas.getContext('2d')    // 創(chuàng)建漸變對象,線性漸變    var grd = context.createLinearGradient(0,0,300,0)    // 設(shè)置漸變顏色    grd.addColorStop(0, '#xxx'); // 設(shè)置顏色    grd.addColorStop(1, '#xxx'); // 設(shè)置顏色    // 將填充樣式設(shè)置為線性漸變對象    context.fillStyle = grd;    context.fillRect(0,0,300,80);}

          繪制徑向漸變的矩形

          function draw() {    var canvas = document.getElementById('canvas')    var context = canvas.getContext('2d')    // 徑向漸變    var grd = context.createRadialGradient(50,50,0,100,100,90);    // 設(shè)置漸變顏色以及方式    grd.addColorStop(0,'#xxx');    grd.addColorStop(1,'#xxx');    context.fillStyle = grd;    context.beginPath();    // 圓形    context.arc(100,100,90,0,Math.PI*2,true);    context.fill();}

          描邊屬性

          線帽屬性:lineCap,表示指定線條的末端如何繪制值:lineCap: butt, round, square,當(dāng)線條具有一定的寬度才能表現(xiàn)出來。

          butt// 定義了線段沒有線帽round// 定義了線段的末端為一個半圓形的線帽square// 定義了線段的末端為一個矩形的線帽

          線條的連接屬性lineJoin,用于兩條線條到的連接方式:

          miter兩條線段的外邊緣一直延伸到它們相交,屬性miterLimit是用來描述如何繪制兩條線段的交點,是表示延伸長度和線條長度的比值。

          默認(rèn)為10,只有miter使用時有效

          lineJoin = [value];round // 兩條線段的外邊緣應(yīng)該和一個填充的弧結(jié)合bevel // 兩條線段的外邊緣應(yīng)該和一個填充的三角形相交

          8.模式

          語法如下:

          createPattern(image, repetitionStyle)
          1. repeat 表示圖像在各個方向上循環(huán)平鋪
          2. repeat-x 表示圖像在橫向上循環(huán)平鋪
          3. repeat-y 表示圖像在縱向上循環(huán)平鋪
          4. no-repeat 表示圖像只使用一次
          function draw() {    var canvas = document.getElementById('canvas')    var context = canvas.getContext('2d')    var img = new Image();     // 使用Image()構(gòu)造函數(shù)創(chuàng)建圖像對象    img.src='../images/xxx'     // 指定圖像的文件地址    img.onload = function() {        // 繪圖模式        var ptrn = context.createPattern(img, 'repeat');        // 填充樣式        context.fillStyle = ptrn;        // 填充矩形        context.fillReat(0,0,500,200);    }}

          移動變化:

          // 移動translate(dx,dy);// 繪制function draw() {    var canvas = document.getElementById('canvas')    var context = canvas.getContext('2d')    // 設(shè)置移動偏移量    context.translate(200, 200);    // 繪制一個圓形    ArcFace(context);}// 繪制一個圓形function ArcFace(context) {    // 繪制一個圓形邊框    context.beginPath();    // 繪制圓形    context.arc(0,0,90,0,Math.PI*2,true);    // 線寬    context.lineWidth=5;    // 描邊    context.strokeStyle='#f90';    context.stroke();    // 繪制    context.beginPath();    context.moveTo(-30, -30);    context.lineTo(-30, -20);    context.moveTo(30, -30);    context.lineTo(30, -20);    context.moveTo(-20, 30);    // 曲線    context.bezierCurveTo(-20, 44, 20, 30, 30, 20);    context.strokeStyle='#000';    context.lineWidth=10;    context.lineCap = 'round';    // 笑臉    context.stroke();}

          縮放變換,語法如下:

          scale(sx, sy);// sx為水平方向上的縮放因子,sy為垂直方向上的縮放因子
          // 示例function draw() {    var canvas = document.getElementById('canvas')    var context = canvas.getContent('2d')    // 移動    context.translate(200,200);    // 縮放    context.scale(0.5,0.5);    ArcFace(context);}

          旋轉(zhuǎn)變換:

          rotate(angle)
          // 旋轉(zhuǎn)例子function draw() {    var canvas = document.getElementById('canvas');    var context = canvas.getContext('2d')    context.translate(200,200);    // 旋轉(zhuǎn)    context.rotate(Math.PI/6);    context.scale(0.5, 0.5)    ArcFace(context)}

          矩形變形,語法如下:

          transform(m1x,m1y,m2x,m2y,dx,dy); // 移動,縮放,旋轉(zhuǎn)1. 移動translate (dx, dy)2. 縮放scale (sx,sy)3. 旋轉(zhuǎn)rotate (A)

          己要寫一個餅圖費時費力,用canvas雖然可以實現(xiàn),但是很難達(dá)到預(yù)期的效果,網(wǎng)上有很多開源的圖表組件庫,我們可以在這個基礎(chǔ)上進行二次開發(fā),方便而且省時省力,也可以寫出很酷炫的效果!

          01 echarts

          地址https://echarts.apache.org/

          推薦★★★★★

          簡介ECharts,一個強大的、交互式的瀏覽器圖表和可視化庫。是我用最多的圖表庫了。豐富的圖表庫,很多用戶把自己的模板都上傳在這里,多達(dá)幾萬個圖表模板!

          02 highcharts

          地址https://www.highcharts.com.cn/

          推薦★★★★★

          簡介兼容 IE6+、完美支持移動端、圖表類型豐富、方便快捷的 HTML5 交互性圖表庫!

          03 chart.js

          地址https://www.chartjs.org/

          推薦★★★★

          簡介Chart.js 是由社區(qū)共同維護的開源項目,歡迎任何人參與! 8 種圖表類型 為你的數(shù)據(jù)提供 8 種可視化展現(xiàn)方式,每種方式都具有動態(tài)效果并且可定制。在所有現(xiàn)代瀏覽器(IE11+)上都有高效的繪圖效率。

          04 Antv

          地址https://antv.vision/zh

          推薦★★★★★

          簡介Antv 是螞蟻集團全新一代數(shù)據(jù)可視化解決方案,致力于提供一套簡單方便、專業(yè)可靠、無限可能的數(shù)據(jù)可視化最佳實踐。它是一個龐大的圖表生態(tài)系統(tǒng)。不單單包含基礎(chǔ)圖表組件。其中的G2更適合我們今天介紹的圖表庫。

          05 bizCharts

          地址https://antv.vision/zh

          推薦★★★★

          簡介BizCharts是阿里通用圖表組件庫,致力于打造企業(yè)中后臺高效、專業(yè)、便捷的數(shù)據(jù)可視化解決方案,基于 G2G2Plot封裝的React圖表庫,已經(jīng)歷阿里復(fù)雜業(yè)務(wù)場景長達(dá)三年的洗禮,在靈活性、易用性、豐富度上滿足常規(guī)圖表和高度自定義圖表的業(yè)務(wù)實現(xiàn)。缺點就是沒有vue版的。

          06 three.js

          地址https://threejs.org/

          推薦★★★★★

          簡介3D圖表的首選,是JavaScript編寫的WebGL第三方庫。提供了非常多的3D顯示功能。

          07 datav

          地址http://datav.jiaminghi.com/

          推薦★★★★★

          簡介含有react和vue版的,搭配echarts一起使用簡直完美!它通過組合不同的配置項可以達(dá)到多變的視覺效果。大部分組件設(shè)置寬高或配置簡單的數(shù)據(jù)即可使用。有三個demo,不過我看很久沒維護了。

          nyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件,可創(chuàng)建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用,可用于儀表盤、報表、數(shù)據(jù)分析、統(tǒng)計學(xué)、金融等領(lǐng)域。AnyChar HTML5圖表高度可定制且高度兼容。擁有純JavaScript API,AnyChart圖表內(nèi)置客戶端數(shù)據(jù)實時更新,多層次向下鉆區(qū)和具體參數(shù)更新。強大的主題引擎使你通過一系列圖表進行獨特的演示體驗,而PDF和圖像輸出能產(chǎn)出圖書質(zhì)量打印文檔。(重要推薦:AnyChart已加入在線訂購,超值特價低至¥368起!)

          更新:

          維恩圖解

          維恩圖是可視化集的關(guān)系的最強大的工具。也就是說,該圖表類型可以很好地顯示集的交叉程度及其嵌套。

          標(biāo)簽云(詞云)

          標(biāo)簽云(也稱為詞云,或加權(quán)列表)是一種數(shù)據(jù)可視化,能夠幫助在視覺上以吸引人的方式展示文本數(shù)據(jù)。尤其廣泛用于依照它們的相對突出方式顯示標(biāo)簽(關(guān)鍵字)。我們的標(biāo)簽云解決方案允許基于分類的顏色規(guī)模,提供很多方法通過設(shè)置允許數(shù)量的位置和角度間隔來排列文字,并支持多個交互設(shè)置。

          瀑布圖表

          瀑布圖表(或馬里奧表、橋圖表、飛磚圖表)被廣泛用于分析目的。尤其,該圖表類型能夠促進流程的分析(銷售、生產(chǎn)、研究等等),特別是在過程中各階段之間的探索或交流的轉(zhuǎn)換。我們的瀑布圖表解決方案在實際上從眾多圖表中脫穎而出,能夠為每個狀態(tài)獲得數(shù)據(jù)絕對值以及狀態(tài)之間的增量(差異)。

          Mekko圖表(Marimekko圖表)和馬賽克圖表

          Mekko圖表(或Marimekko圖表)是一種從多個類別中可視化產(chǎn)品銷售,顯示在工作中技能的分配等等的便捷手段。本質(zhì)上它是接近堆疊列圖表類型,但后者只顯示類別內(nèi)的值,而Mekko圖表還顯示每個類別的累積值。

          條形Mekko圖表

          條形Mekko圖表基本上是類同于Mekko圖表,但它有一些獨特的特性。首先,條形Mekko圖表允許繪制趨勢線。其次,它適合于包括負(fù)值。最后,條形Mekko圖表比常規(guī)是Mekko圖表對很多人來說看起來更熟悉。

          象限圖

          象限圖是一個簡單的、同時非常方便和高效的排序和分類離散數(shù)據(jù)的工具。我們的解決方案提供了所有必需的功能,并允許成功地解決各種流行的任務(wù),比如分散數(shù)據(jù)的分類、BI服務(wù)測評、艾森豪威爾矩陣、SWOT分析等等。

          谷歌電子表格數(shù)據(jù)加載器

          谷歌電子表格是一個優(yōu)秀的流行數(shù)據(jù)源。現(xiàn)在我們的數(shù)據(jù)適配器已經(jīng)配備了從谷歌電子表格加載數(shù)據(jù)的功能。您可以隨時充分利用Google電子表格數(shù)據(jù)加載器,并請注意:數(shù)據(jù)可能來自公開共享文檔。

          標(biāo)記選擇和縮放工具

          標(biāo)記選擇和縮放工具能夠大大地促進探索性數(shù)據(jù)分析工作。他們的研究數(shù)據(jù)可視化地展示在一個交互式圖表上,更方便和直觀。同樣重要的是,我們的標(biāo)記選擇和縮放工具可能通過事件與任何自定義UI集成。

          規(guī)模同步功能

          規(guī)模同步有助于一些情況下當(dāng)你必須在一個可視化中展示不同的數(shù)據(jù)。用它來避免視覺混亂和防止這樣一個復(fù)雜的圖表誤導(dǎo)觀眾。實際上,當(dāng)尺度都是同步的時,你甚至可以添加堆積而最后還是制作出了好看且有用的圖表。

          文本包裝“byWord”功能

          應(yīng)廣大用戶的請求,文本包裝現(xiàn)在在所有包含文本的圖表元素中得到支持。該文本格式功能將確保每一個輸出文本絕對的print-friendly。

          改進:

          • Stackoverflow添加getLabel方法,可以用來定制獨特的軸標(biāo)簽設(shè)置。
          • TS-91、TS-92方法anchor現(xiàn)在接受“auto”值,使其自動調(diào)整數(shù)據(jù)點標(biāo)簽位置錨。

          Bug修復(fù):

          • TS-108修復(fù)ExtJS的兼容性問題,由于不正確的polyfill使用會導(dǎo)致其發(fā)生
          • TS-63修復(fù)錯誤工具提示寬度自動計算的問題
          • TS-32、TS-49修復(fù)在Aurelia和Angular 2框架中導(dǎo)入的問題
          • TS-77修復(fù)在IE8呈現(xiàn)旋轉(zhuǎn)文本的錯誤
          • TS-103修復(fù)Firefox梯度問題
          • TS-38 修復(fù)餅圖中overlapMode方法的錯誤
          • DVF-2216修復(fù)ContextMenu中attach方法的問題
          • DVF-2303修復(fù)倒置的X軸的錯誤繪制的問題

          API變化

          方法使用替換
          saveAsPNGsaveAsPng
          saveAsJPGsaveAsJpg
          saveAsSVGsaveAsSvg
          toSVGtoSvg
          更多AnyChart相關(guān)產(chǎn)品的最新資訊,請聯(lián)系【在線客服】

          查看更新原文:AnyChart v7.14.0


          主站蜘蛛池模板: 日韩亚洲AV无码一区二区不卡| 无码人妻精品一区二区三区99不卡 | 国产第一区二区三区在线观看| 日韩在线观看一区二区三区| 亚洲精品无码一区二区| 国产综合精品一区二区| 国产三级一区二区三区| 色婷婷香蕉在线一区二区| 日本一区二区三区爆乳| 在线免费视频一区二区| 国产情侣一区二区| 日韩精品无码Av一区二区| 国产另类ts人妖一区二区三区| 亚洲第一区精品观看| 变态拳头交视频一区二区| 国产在线aaa片一区二区99| 狠狠色成人一区二区三区| 激情一区二区三区| 在线播放偷拍一区精品| 后入内射国产一区二区| 国产日韩精品一区二区三区在线 | 亚洲熟妇av一区二区三区漫画| 无码毛片一区二区三区中文字幕 | 国产激情一区二区三区小说| 国产亚洲福利一区二区免费看| 亚洲国产精品一区二区三区久久| 国产一区二区中文字幕| 九九久久99综合一区二区| 精品国产一区二区三区香蕉事 | 精品视频在线观看一区二区三区| 成人国产一区二区三区| 无码人妻精品一区二区三区99性 | 无码人妻久久一区二区三区免费| 亚洲综合无码一区二区痴汉 | AA区一区二区三无码精片| 国产成人一区二区动漫精品| 精品黑人一区二区三区| 成人国内精品久久久久一区| 日韩精品一区二区三区老鸦窝| 国产一区二区电影在线观看| 精品3d动漫视频一区在线观看|