渐变

Context对象可以通过createLinearGradient()和createRadialGradient()两个方法创建渐变对象，这两个方法的原型如下：

Object createLinearGradient(x1, y1, x2, y2);

创建一个从(x1, y1)点到(x2, y2)点的线性渐变对象。

Object createRadialGradient(x1, y1, r1, x2, y2, r2);

创建一个从以(x1, y1)点为圆心、r1为半径的圆到以(x2, y2)点为圆心、r2为半径的圆的径向渐变对象。

渐变对象创建完成之后必须使用它的addColorStop()方法来添加颜色，该方法的原型如下：

void addColorStop(position, color);

其中position表示添加颜色的位置，取值范围为[0, 1]，0表示起点，1表示终点；color表示添加的颜色，取值可以是任何CSS颜色值。

渐变对象创建并配置完成之后就可以将其赋予Context对象的strokeStyle属性或者fillStyle属性，然后绘制的图形就具有了所需的渐变效果。

首先来完成一个直线渐变的例子：

<!DOCTYPE HTML>
<html>
<body>
<canvas id="canvas" width="800"height="800">    <p>Your browserdoes not support the canvas element!</p>
</canvas>    <script type="text/javascript">
var canvas =document.getElementById("canvas");
var context =canvas.getContext("2d");    {var lg = context.createLinearGradient(0,0, 100, 100); //可以尝试改变这里的参数，你可以获取更多   lg.addColorStop(0, '#ff0000');    lg.addColorStop(1, '#0000ff');    context.strokeStyle = lg;    context.beginPath();context.moveTo(0,0);context.lineTo(300,300)  context.stroke();}
</script>
</body>
</html>

效果：

现在来完成一个颜色垂直对称的矩形：

<!DOCTYPE HTML>
<html>
<body>
<canvas id="canvas" width="800"height="800">    <p>Your browserdoes not support the canvas element!</p>
</canvas>    <script type="text/javascript">
var canvas =document.getElementById("canvas");
var context =canvas.getContext("2d");    {//画整个矩形的上半部分var lg1 = context.createLinearGradient(10,10, 10, 110); lg1.addColorStop(0, '#ff0000');    lg1.addColorStop(1, '#0000ff');context.fillStyle = lg1;context.beginPath();context.fillRect(10,10,210,100);//画整个矩形的下半部分var lg2 = context.createLinearGradient(10,110, 10, 210); lg2.addColorStop(0, '#0000ff');    lg2.addColorStop(1, '#ff0000');context.fillStyle = lg2;context.beginPath();context.fillRect(10,110,210,100);}
</script>
</body>
</html>

效果图：

现在来看一个createRadialGradient的例子：

<!DOCTYPE HTML>
<html>
<body>
<canvas id="canvas" width="800"height="800">    <p>Your browserdoes not support the canvas element!</p>
</canvas>    <script type="text/javascript">
var canvas =document.getElementById("canvas");
var context =canvas.getContext("2d");    var rg =context.createRadialGradient(450, 150, 20, 450, 150, 100);
rg.addColorStop(0, '#ff0000');
rg.addColorStop(1, '#0000ff');
context.fillStyle = rg;
context.beginPath();
context.arc(450,150,100,0,Math.PI*2,true);
context.fill();</script>
</body>
</html>

效果图：

从三个实验可以看出，渐变的实现其实就是实现一支特殊的画笔（createLinearGradient或者createRadialGradient），但是要注意画笔渐变对象的坐标，需要和将要画的图形的坐标配对，不然，你将不能得到想要的效果。

HTML5 Canvas 渐变相关推荐

HTML5图片怎么添加渐变,HTML5 canvas图和实现填充渐变形状
本篇教程探讨了HTML5 canvas图和实现填充渐变形状,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < html PUBLIC "-//W3C/ ...
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解大家好,又见面了,感觉我上一篇博客对部分同学都挺有帮助的,于是我决定继续写下去,会继续的解析知识点让大家更容易理解,希望能给大家 ...
HTML5绘制渐变直线,如何使用HTML5 Canvas绘制动态线性渐变
如果要使用HTML5 Canvas绘制线性渐变,需要用到createLinearGradient()方法.下面我们就来一起看看具体的内容. createLinearGradient() createL ...
html5 Canvas颜色渐变（画图很重要）
如果我们想要给图形上色,有两个重要的属性可以做到:fillStyle 和 strokeStyle. fillStyle = color strokeStyle = color stroke ...
HTML5 canvas画图
HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,<canvas> 元素本身并没有绘制能力(它仅仅 ...
HTML5 Canvas 基础API和实例
开发HTML代码是一件简单的事情,一个文字编辑器,然后一个支持HTML5的浏览器即可(本人的浏览器是Firefox8.0.1).了解HTML的朋友应该知道,HTML5中最让人兴奋的API是canvas ...
c html canvas,HTML5 canvas
绘制圆形 function draw(id){ let canvas = document.getElementById(id) if (canvas == null){ return false } ...
《HTML5 Canvas开发详解》——导读
https://yqfile.alicdn.com/bc81e95aba389209ecb7176965c56b0ba2d9c780.png" > 前言 HTML5 Canvas为开发 ...
HTML5 Canvas
HTML5 Canvas 转自:https://blog.csdn.net/u012468376/article/details/73350998 一.canvas简介 <canvas&g ...

HTML5 Canvas 渐变

渐变

HTML5 Canvas 渐变相关推荐

最新文章

热门文章