本文摘自PHP中文网,作者不言,侵删。
如果要使用HTML5 Canvas绘制线性渐变,需要用到createLinearGradient()方法。下面我们就来一起看看具体的内容。createLinearGradient()
createLinearGradient()的参数如下。
createLinearGradient(渐变开始位置的X坐标,渐变开始位置的Y坐标,渐变结束位置的X坐标,渐变结束位置的Y坐标)
我们来看具体示例
代码如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
|
说明:
body标签的onload事件在显示页面时执行PageLoad()函数。
显示页面时,将处理除事件侦听器之外的以下代码。
在画布上绘图使用getElementsByTagName()方法从ID获取画布对象。调用canvas对象上的getContext()方法以获取画布的上下文。通过调用clearRect()方法初始化画布。
创建渐变是由createLinearGradient()方法创建的。如果创建成功,则将返回渐变对象作为返回值。渐变的开始颜色和结束颜色由渐变对象的addColorStop()方法设置。
在画布上绘制渐变可以通过将渐变对象指定给上下文的fillStyle并执行fillRect()方法来在画布上绘制渐变。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
如果在画布中移动鼠标指针,则会执行以下事件侦听器的代码。
从鼠标指针坐标到画布右下角创建一个线性渐变,并在画布上绘制它。
1 2 3 4 5 6 7 8 9 10 11 |
|
运行结果
使用Web浏览器显示上述HTML文件。将显示如下所示的屏幕,完成渐变绘图。
在画布中移动鼠标。渐变从鼠标位置绘制到右下角。
移动鼠标时,渐变会随着移动
以上就是如何使用HTML5 Canvas绘制动态线性渐变的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
解析HTML5应用程序缓存application cache
h5中在拖动的元素或选择的文本进入到有效的放置目标时触发的事件ondragenter
更多相关阅读请进入《HTML5》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者