我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

渐变色

线性渐变

用法

代码示例

效果演示

放射渐变

线性渐变和放射渐变的演示链接

图案

说明

案例

介绍

演示链接

效果图

代码示例

渐变色

Canvas元素支持线性(linear)和放射(radial)渐变。

方法	描述
CanvasGradient createLinearGradient(double x0, double y0,double x1,double y1)	创建线性渐变。传入该方法的参数表示渐变线的两个端点。
CanvasGradient createRadialGradient(double x0, double y0,double r0,double x1,double y1,double r1)	创建放射渐变。参数代表位于圆锥形渐变区域两端的圆形。

线性渐变

用法

通过调用createLinearGradient()方法创建线性渐变。传入两个点x、y的坐标，代表了渐变方向从x到y。两点连线就是canvas建立颜色渐变效果的依据。调用方法之后，会返回一个CanvasGradient实例，最后将该渐变色设置为fillStyle的值，接下来调用fill()时，便会以此渐变色进行填充，直到填充属性设置为其他值为止。

在创建好渐变色之后，通过CanvasGradient之中唯一方法addColorStop()向渐变色中添加“颜色停止点（color stop）”，传入两个参数：一个是0-1.0之间的double值，代表在渐变色的位置，另一个是DOMString类型的CSS3颜色字串值。

Gradient：渐变色

代码示例

水平渐变

 var canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),//更改本行代码可以更改渐变的方向gradient = context.createLinearGradient(0,0,canvas.width,0);gradient.addColorStop(0, 'blue');gradient.addColorStop(0.25, 'white');gradient.addColorStop(0.5, 'purple');gradient.addColorStop(0.75, 'red');gradient.addColorStop(1, 'yellow');context.fillStyle=gradient;context.rect(0,0,canvas.width,canvas.height);context.fill();

效果演示

上图是上述代码的效果图。

如果更改渐变色的方向，只需要更改gradient = context.createLinearGradient();的参数

垂直渐变

gradient = context.createLinearGradient(0,0,0,canvas.height);

斜向渐变

gradient = context.createLinearGradient(0,0,canvas.width,canvas.height);

半渐变

gradient = context.createLinearGradient(0,0,0,canvas.height/2);

注意：渐变色的最后一个颜色填充下半部分。

放射渐变

正如上一小节，线性渐变需要指定一条渐变线。要创建放射渐变，需要指定连个圆形，代表某个圆锥的起止部位。

同样地，仍需要更改那一行代码：

gradient=context.createRadialGradient(canvas.width/2,canvas.height,10,canvas.width/2,0,100);

线性渐变和放射渐变的演示链接

链接内展示的是放射渐变，只需要按照上面描述更改那一行代码即可看到其他的线性渐变的演示

https://827652549.github.io/Canvas/Unit2/Gradient.html

图案

说明

除了颜色和渐变色，Canvas元素也允许使用图案来对图形和文本进行描边和填充。

这里的图案可以是：

image元素
canvas元素
video元素

可以用createPattern()方法来创建图案，该方法接收两个参数：图案本身和一个告知浏览器应该如何设定重复图案的字符串：

repeat 全部重复
repeat-x 沿x轴重复
repeat-y 沿y轴重复
no-repeat 不重复

案例

介绍

通过点击四个不同的按钮查看不同的重复效果。

注意：每次点击按钮都需要新创建一个CanvasPattern对象，创建一个新对象是有必要的。因为CanvasPattern对象是Javascript中那种所谓的“不透明对象(opaque object)”，它没有提供用于操作其内容的属性和方法（如setPattern）。

createPattern()的用法
方法	描述
CanvasPattern createPattern(HTMLImageElement \| HTMLCanvasElement \| HTMLVideoElement image , DOMString repetition)	创建一个可以用在canvas之中对图形和文本进行填充与描边的图案。

演示链接

https://827652549.github.io/Canvas/Unit2/Pattern.html

效果图

代码示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图案</title><style>#canvas {background: #eeeeee;border: thin solid cornflowerblue;}#radios {padding: 10px;}</style>
</head>
<body>
<p>点击不同的按钮查看不同的重复演示</p><div id="radios"><input type="radio" id="repeatRadio" name="patternRadio" checked>repeat<input type="radio" id="repeatXRadio" name="patternRadio">repeatX<input type="radio" id="repeatYRadio" name="patternRadio">repeatY<input type="radio" id="noRepeatRadio" name="patternRadio">noRepeat</div>
<canvas id="canvas" height="500" width="500"></canvas>
</body><script>var canvas = document.getElementById('canvas'),context = canvas.getContext('2d'),repeatRadio = document.getElementById('repeatRadio'),repeatXRadio = document.getElementById('repeatXRadio'),repeatYRadio = document.getElementById('repeatYRadio'),noRepeatRadio = document.getElementById('noRepeatRadio'),image = new Image();//Function……function fillCanvasWithPattern(repeatString) {var pattern = context.createPattern(image,repeatString);context.clearRect(0, 0, canvas.width, canvas.height);context.fillStyle=pattern;context.fillRect(0, 0, canvas.width, canvas.height);context.fill();}//Event……repeatRadio.onclick=function (ev) {fillCanvasWithPattern('repeat');};repeatXRadio.onclick=function (ev) {fillCanvasWithPattern('repeat-x');};repeatYRadio.onclick=function (ev) {fillCanvasWithPattern('repeat-y');};noRepeatRadio.onclick=function (ev) {fillCanvasWithPattern('no-repeat');};//Initializationimage.src='../images/smalltree.png';image.onload=function (ev) {fillCanvasWithPattern('repeat');}</script>
</html>

【绘制】HTML5 Canvas 中渐变色和图案（图文、示例）相关推荐

HTML1个像素宽的代码,HTML5 Canvas中绘制一个像素宽的细线实现代码详情
正统的HTML5 Canvas中如下代码ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); ct ...
html5中阴影,HTML5 Canvas 中的颜色、样式和阴影的属性和方法
颜色.样式和阴影的属性与方法 fillStyle 设置或返回用于填充绘画的颜色.渐变或模式 strokeStyle 设置或返回用于笔触的颜色.渐变或模式 ...
html5怎么转换,HTML5 canvas中的转换方法
转换方法 scale(scalewidth,scaleheight) 缩放当前绘图至更大或更小 scalewidth 缩放当前绘图的宽度 (1=100%, ...
HTML5 Canvas中 fillText() 和 strokeText() 的区别
前言 Canvas现在越来越多地被运用到我们的项目中了,所以对Canvas的研究也得跟上呀,不然就被时代抛弃了.这次要给大家分享的是 HTML5 Canvas 中的 fillText 和 stroke ...
用html5做淡出淡入效果,在Html5 canvas中淡入淡出
我已经有了一个图像的画布,我想淡入淡出图像不断.我已经使用上面的代码:在Html5 canvas中淡入淡出 var canvas; var context; var ga = 0.0; var tim ...
HTML5 Canvas中处理图像和视频
处理图像和视频除了绘制矢量图形和文本之外,canvas还提供了极为丰富的图像支持.开发者可以选择绘制某幅图像的全部或某个部分,在绘制时可以进行缩放或保持原样,可以把图像绘制到画布的任何地方.同时,还 ...
html5创建三次贝塞尔曲线,HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
在HTML5 Canvas中,可以用以下方法描画三阶和二阶的贝塞尔曲线: 复制代码代码如下: context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) c ...
HTML5 Canvas中绘制文本
绘制文本画布中不仅可以绘制图形,还可以绘制文本.绘制文本,既可以使用填充方法,也可以使用勾勒方法: fillText(text, x, y, [maxWidth]) strokeText(text, ...
html5画椭圆的完整代码,HTML5 Canvas中绘制椭圆的4种方法
概述 HTML5中的Canvas并没有直接提供绘制椭圆的方法,下面是对几种绘制方法的总结.各种方法各有优缺,视情况选用.各方法的参数相同: 1.context为Canvas的2D绘图环境对象, 2.x ...

【绘制】HTML5 Canvas 中渐变色和图案（图文、示例）

渐变色

线性渐变

用法

代码示例

效果演示

放射渐变

线性渐变和放射渐变的演示链接

图案

说明

案例

介绍

演示链接

效果图

代码示例

【绘制】HTML5 Canvas 中渐变色和图案（图文、示例）相关推荐

最新文章

热门文章