Html5 Canvas初探学习笔记(9) -渐变
本篇继续介绍html5的绘制效果,和之前介绍的不同,本篇介绍的渐变并不是一个状态值,他是之前介绍的fillStyle的一个值。首先来看一个例子:
代码如下:
var gradient = context.createLinearGradient(50,50,150,150); gradient.addColorStop(0,"rgb(0,0,0)"); gradient.addColorStop(1,"rgb(0,255,0)"); context.fillStyle = gradient; context.fillRect(50,50,100,100);
登录后复制
这是一个线性渐变,首先通过createLinearGradient创建线性渐变,四个参数分别为起点的横纵坐标和终点的横纵座标,然后为两个点加入色值,addColorStop的0为起点,1为终点,第二个参数是颜色,可以是rgb也可以是rgba。
前一个是线性渐变,还有弧形渐变,效果如下:
代码如下:
var gradient = context.createRadialGradient(50,50,5,150,150,10); gradient.addColorStop(0,"rgb(0,0,0)"); gradient.addColorStop(1,"rgb(0,255,0)"); context.fillStyle = gradient; context.fillRect(50,50,100,100);
登录后复制
createRadialGradient前三个参数为起点圆的圆心横纵坐标,圆半径。后三个参数如下是终点圆圆心坐标和圆的半径。
使用圆形渐变可以绘制出中心开始的渐变,效果如下:
代码如下:
var gradient = context.createRadialGradient(100,100,0,100,100,72); gradient.addColorStop(0,"rgb(0,0,0)"); gradient.addColorStop(1,"rgb(0,255,0)"); context.fillStyle = gradient; context.fillRect(50,50,100,100);
登录后复制
起点和终点是正方形的中心,半径不同就可以造出这种效果。
以上就是Html5 Canvas初探学习笔记(9) -渐变 的内容,更多相关内容请关注PHP中文网(www.php.cn)!
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前
By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前
By 尊渡假赌尊渡假赌尊渡假赌
击败分裂小说需要多长时间?
3 周前
By DDD
R.E.P.O.保存文件位置:在哪里以及如何保护它?
3 周前
By DDD

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)