HTML5-画布（canvas）效果之-渐变色
生活随笔
收集整理的這篇文章主要介紹了
HTML5-画布（canvas）效果之-渐变色
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE HTML>
<html>
<head>
<title>漸變色</title>
</head>
<body>
<canvas id="canvas" width="200" height="100" style="background-color: rgb(222, 222, 222)">
您的瀏覽器不支持 canvas 標簽
</canvas>
<br />
<button type="button" onclick="drawIt();">Demo</button>
<button type="button" onclick="clearIt();">清除畫布</button>
<script type="text/javascript">
var ctx = document.getElementById('canvas').getContext('2d');
function drawIt() {
clearIt();
/*
* context.createLinearGradient(xStart, yStart, xEnd, yEnd) - 創建線性漸變對象，并返回 CanvasGradient 類型的對象
* xStart, yStart - 線性漸變對象的起始點坐標
* xEnd, yEnd - 線性漸變對象的結束點坐標
*
* CanvasGradient.addColorStop(offset, color) - 新增一個漸變參考點
* offset - 漸變參考點的位置，0.0 - 1.0 之間。起始點為 0，結束點為 1
* color - 漸變參考點的顏色值
*/
var linearGradient = ctx.createLinearGradient(50, 0, 50, 100);
linearGradient.addColorStop(0, "red");
linearGradient.addColorStop(0.5, "green");
linearGradient.addColorStop(1, "blue");
ctx.beginPath();
ctx.arc(50, 50, 50, 0, 2 * Math.PI, true);
ctx.fillStyle = linearGradient;
ctx.fill();
/*
* context.createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd) - 創建放射性漸變對象，并返回 CanvasGradient
* xStart, yStart - 放射性漸變對象的開始圓的圓心坐標
* radiusStart - 開始圓的半徑
* xEnd, yEnd - 放射性漸變對象的結束圓的圓心坐標
* radiusEnd - 結束圓的半徑
*/
var radialGradient = ctx.createRadialGradient(150, 50, 0, 150, 50, 50);
radialGradient.addColorStop(0, "red");
radialGradient.addColorStop(0.5, "green");
radialGradient.addColorStop(1, "blue");
ctx.beginPath();
ctx.arc(150, 50, 50, 0, 2 * Math.PI, true);
ctx.fillStyle = radialGradient;
ctx.fill();
}
function clearIt() {
ctx.clearRect(0, 0, 200, 100);
}
</script>
</body>
</html>
<html>
<head>
<title>漸變色</title>
</head>
<body>
<canvas id="canvas" width="200" height="100" style="background-color: rgb(222, 222, 222)">
您的瀏覽器不支持 canvas 標簽
</canvas>
<br />
<button type="button" onclick="drawIt();">Demo</button>
<button type="button" onclick="clearIt();">清除畫布</button>
<script type="text/javascript">
var ctx = document.getElementById('canvas').getContext('2d');
function drawIt() {
clearIt();
/*
* context.createLinearGradient(xStart, yStart, xEnd, yEnd) - 創建線性漸變對象，并返回 CanvasGradient 類型的對象
* xStart, yStart - 線性漸變對象的起始點坐標
* xEnd, yEnd - 線性漸變對象的結束點坐標
*
* CanvasGradient.addColorStop(offset, color) - 新增一個漸變參考點
* offset - 漸變參考點的位置，0.0 - 1.0 之間。起始點為 0，結束點為 1
* color - 漸變參考點的顏色值
*/
var linearGradient = ctx.createLinearGradient(50, 0, 50, 100);
linearGradient.addColorStop(0, "red");
linearGradient.addColorStop(0.5, "green");
linearGradient.addColorStop(1, "blue");
ctx.beginPath();
ctx.arc(50, 50, 50, 0, 2 * Math.PI, true);
ctx.fillStyle = linearGradient;
ctx.fill();
/*
* context.createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd) - 創建放射性漸變對象，并返回 CanvasGradient
* xStart, yStart - 放射性漸變對象的開始圓的圓心坐標
* radiusStart - 開始圓的半徑
* xEnd, yEnd - 放射性漸變對象的結束圓的圓心坐標
* radiusEnd - 結束圓的半徑
*/
var radialGradient = ctx.createRadialGradient(150, 50, 0, 150, 50, 50);
radialGradient.addColorStop(0, "red");
radialGradient.addColorStop(0.5, "green");
radialGradient.addColorStop(1, "blue");
ctx.beginPath();
ctx.arc(150, 50, 50, 0, 2 * Math.PI, true);
ctx.fillStyle = radialGradient;
ctx.fill();
}
function clearIt() {
ctx.clearRect(0, 0, 200, 100);
}
</script>
</body>
</html>
總結
以上是生活随笔為你收集整理的HTML5-画布（canvas）效果之-渐变色的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Html5开发-使用Canvas绘制图片
- 下一篇： 如何存储和恢复 HTML5 Canvas