详细解释HTML5 Canvas中渐进填充的参数设置与使用,Canvas中透明度的设置与使用,结合渐进填充与透明度支持,实现图像的Mask效果.

一:渐进填充(Gradient Fill)

Canvas支持两种渐进填充方式,一种为线性渐进填充(Line Gradient Fill),另外一种称为经向渐变填充(RadialGradient Fill)。其API分别为:

createLinearGradient(x1, y1, x2, y2);

其中x1,y1为第一个点坐标,x2,y2为第二个点坐标。

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

其中x1, y1为第一个中心点坐标,r1为半径,x2, y2为第二个中心点坐标,r2为半径。

为每个点设置颜色

addColorStop(position, color);

其中position表示位置,大小范围[0~1]其中0表示第一个点,1表示第二个点坐标

Color表示颜色值,任何CSS的颜色值。

渐进填充对象创建与配置之后可以用来设置context的strokeStyle与fillStyle实现文字,几何形状的渐进颜色填充。

线性渐进方式的代码演示:

 <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>渐变</title> </head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
你的浏览器不支持canvas!
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(0.5,"#0000ff");
grd.addColorStop(0.6,"#ffffff");
grd.addColorStop(0.7,"#000000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
</body>
</html>

aaarticlea/png;base64,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" alt="" />

经向渐变填充:绘制一个矩形,并用放射状/圆形渐变进行填充.

 <!DOCTYPE html>
<html>
<body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
浏览器不支持canvas!
</canvas> <script> var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100); </script> </body>
</html>

aaarticlea/png;base64,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" alt="" />

把一幅图像放置到画布上:

 <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画图</title> </head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
你的浏览器不支持canvas!
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);
</script>
</body>
</html>

aaarticlea/png;base64,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" alt="" />

HTML5<canvas>标签:使用canvas元素在网页上绘制渐变和图像(2)的更多相关文章

  1. HTML5<canvas>标签:使用canvas元素在网页上绘制线条和圆(1)

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  2. HTML5<canvas>标签:使用canvas元素在网页上绘制四分之一圆(3)

    前几天自己做了个四分之一的圆,放到手机里面测试.效果不是很好.于是今天通过查资料,找到了canvas.自己研究了一天,发现可以使用canvas画圆.代码如下: <!doctype html> ...

  3. jQuery如何检查某个元素在网页上是否存在

    $("ID")获取的永远是对象,即使网页上没有此元素.因此当要用jQuery检查某个元素在网页上是否存在时,不能使用以下代码: if($("#ID")){ // ...

  4. HTML5 source标签:媒介元素定义媒介资源

    HTML5 source标签是一种媒介元素(比如 <video> 和 <audio>)来定义媒介资源.<source> 标签允许您规定可替换的视频/音频文件供浏览器 ...

  5. jQuery检查某个元素在网页上是否存在

    jQuery选择器有比较完善的处理机制,用jQuery获取网页中不存在的元素也不会报错,值得注意的是,利用$('#tt')获取的永远是对象,即使网页上没有此元素.当使用jQuery检查某个元素在网页上 ...

  6. javascript: Element.getBoundingClientRect() 获取元素在网页上的坐标位置

    来自:https://blog.csdn.net/weixin_42895400/article/details/81811095?utm_source=blogxgwz1 Element.getBo ...

  7. 用HTML5 video标签插入视频,在谷歌浏览器上播放视频时,右下角显示的下载按钮怎么去掉

    使用H5的video标签可以直接插入视频,一般在浏览器效果如下图显示: 但有时在谷歌浏览器上显示,会遇到右下角有下载按钮.如果项目要求去掉这个下载按钮,怎么办呢?如下图显示: 分析: 经本人测试,是谷 ...

  8. HTML5新增Canvas标签及对应属性、API详解(基础一)

    知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...

  9. HTML5的canvas标签制作黑客帝国里的简单画面

    1.加入canvas标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> ...

随机推荐

  1. Ganglia监控安装配置

    172.17.20.123 node1 gmetad.gmond.web 172.17.20.124 node2 gmond 1.服务器安装好epel源后,安装ganglia yum install ...

  2. MyEclipse格式化JSP代码导致Java表达式<%= %>自动换行的解决办法

    MyEclipse格式化JSP代码导致Java表达式<%= %>自动换行的解决办法: 可以将Java表达式<%= %>换成EL表达式.

  3. what is feeding and what is 读扩散 and 写扩散?

    what is feeding? 通俗点说feed系统就是当你登陆进对应网站后:微信朋友圈的动态.人人网上看到的一件件新鲜事.新浪微博上推到你面前的一条条新围脖等等.系统中的每一条消息就是一个feed ...

  4. 自定义控件,继承自 ListView

    public class MyListView extends ListView { /** * 如果在xml中创建并设置了style,就会调用三个参数的. * * @param context * ...

  5. C语言实现斐波那契数列

    1.函数一用递归实现 2.函数二用循环实现 #include<stdio.h> #include<stdlib.h> #pragma warning(disable:4996) ...

  6. 【Leetcode】413. Arithmetic Slices

    Description A sequence of number is called arithmetic if it consists of at least three elements and ...

  7. python2.7入门---面向对象

        Python从设计之初就已经是一门面向对象的语言,正因为如此,在Python中创建一个类和对象是很容易的.所以,这篇文章我们来记录下Python的面向对象编程.如果你以前没有接触过面向对象的编 ...

  8. python eval()函数的妙用和滥用

    eval()函数十分强大,官方demo解释为:将字符串str当成有效的表达式来求值并返回计算结果: >>> s='8*8' >>> eval(s) 64 >& ...

  9. shell -- shift用法

    shift是Unix中非常有用的命令.可以使命令参数左移,从而使脚本程序中命令参数位置不变的情况下依次遍历所有参数.如shift 3表示原来的$4现在变成$1,原来的$5现在变成$2等等,原来的$1. ...

  10. Java与C++进行系统间交互:Protocol Buffer

    在一次项目中,因笔者负责的java端应用需要与公司C++系统进行交互,公司选定Protocol Buffer方案,故简单的了解一下 有需要的可以看一下其他作者的文章,了解一下Protobuf: htt ...