1、定義canvas的尺寸的時候最好用html的方式定義，用width和height的方式，用css會導致畫布按照css設定的方式進行縮放，cavas內部是一個2d的渲染環境

2、一個canvas對應一個2d的渲染環境，繪制圖形的操作都是在2d渲染環境中進行的

<canvas id="canvas-1" style="border:solid 1px gray;" width = "400" height="400"></canvas>

　　一個簡單的例子

<script type="text/javascript">var oCanvas = document.getElementById('canvas-1');var context = oCanvas.getContext('2d');//指向2d渲染環境的引用context.fillStyle = "#FF0000";context.fillRect(20,20,100,200)</script>
在400*400 的畫布上繪制一個距離左邊上邊20px的一個100*200的矩形用#ff0000顏色填充

　　canvas的2d環境有很多api可以調用

3、fillStyle 屬性設置或返回用于填充繪畫的顏色、漸變或模式，上面我們直接用個的顏色，漸變指的是一個顏色漸變對象

a.首先是context創建一個線性的漸變createLinearGradient()? b.然后設置漸變的范圍 createLinearGradient()?3.設定顏色漸變的階段值(addColorStop())

var grd=context.createLinearGradient(0,0,170,0);//這是一個從左到右的漸變grd.addColorStop(0,"black");grd.addColorStop(0.5,"red");grd.addColorStop(1,"white");//從黑-->紅-->白context.fillStyle = grd;context.fillRect(0,0,150,100)

　　

var my_gradient=ctx.createLinearGradient(0,0,0,170);//從上到下 my_gradient.addColorStop(0,"black"); my_gradient.addColorStop(1,"white");

　　

context.fillRect(0,0,200,200);var grd=context.createLinearGradient(0,0,200,200);對角線漸變grd.addColorStop(0,"black");grd.addColorStop(0.5,"red");grd.addColorStop(1,"white");context.fillStyle = grd;context.fillRect(0,0,200,200);

4、填充模式

用模式去填充圖片createPattern(img,direction)；

接收2個參數，img對象，和方向的參數repeat repeat-x repeat-y

很奇怪的是我們首次運行的時候并不能繪制出來，而是通過綁定事件的方式就可以繪制出來，

必須在最后加上context.fill()這個函數，否則無法繪制。

<img src="tet.jpg" id="img" οnclick="test()">

　　

　　　function test () {var direction = 'repeat' || 'repeat-x' || 'repeat-y';var img = document.getElementById('img');var pat = context.createPattern(img,direction);context.rect(0,0,400,400);context.fillStyle=pat;context.fill();}

　　

轉載于:https://www.cnblogs.com/knightshibiao/p/3861015.html

總結

以上是生活随笔為你收集整理的canvas入门-1三种填充方式、渐变、模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。