最近在看一些關于Canvas的知識...這篇文章主要是用來記錄學習中遇見的一些問題...以及難以理解的一些東西..

　　轉帖請注明出處:http://www.cnblogs.com/Troy-Lv5/p/3713900.html?

　　前置式兩個對象. canvas與context, 下面將一直使用這兩個對象進行說明

var canvas = document.getElementById("canvasDom"); var context = canvas.getContext("2d");

　　1. 線性漸變.

//createLinearGradient參數為: //開始的x坐標, 開始的y坐標, 結束的x坐標, 結束的y坐標 //和使用photoshop時拉動漸變色是一樣的道理
//比如現在使用的就是開始的點為x:200, y:200, 結束的點為x:400, y:200
//當然我這樣設置是因為我要顯示的rect是在x:200, y:300的位置, 大小為200*200
var gradient = context.createLinearGradient(200,200, 400, 200); gradient.addColorStop(0, "red"); gradient.addColorStop(0.25, "yellow"); gradient.addColorStop(0.5, "green"); gradient.addColorStop(0.75, "blue"); gradient.addColorStop(1, "purple");

context.fillStyle = gradient;
context.rect(200,300,200,200);
context.fill();

?

?

?

?

?

?

?

轉載于:https://www.cnblogs.com/Troy-Lv5/p/3713900.html

總結

以上是生活随笔為你收集整理的Canvas杂谈的全部內容，希望文章能夠幫你解決所遇到的問題。

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