首页 / JAVASCRIPT / Javascript高级编程学习笔记（92）—— Canvas(9) 渐变

Javascript高级编程学习笔记（92）—— Canvas(9) 渐变

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Javascript高级编程学习笔记（92）—— Canvas(9) 渐变，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含972字，纯文字阅读大概需要2分钟。

内容图文

渐变

渐变由 canvasGradient 实例表示

要创建一个渐变对象需要调用 createLinearGradient() 方法

该方法接收四个参数:

  1. 起点的x坐标
  2. 起点的y坐标
  3. 终点的x坐标
  4. 终点的y坐标

调用该方法后会创建一个指定大小的实例,并返回一个 CanvasGradient 实例

 

创建渐变对象后需要指定色标,通过 addColorStop()

该方法接收两个参数:

  • 色标位置 
  • CSS颜色值

如:

var gradient = context.createLinearGradient(30,30,70,70);

gradient.addColorStop(0,"white");
gradient.addColorStop(1,"black");

 

渐变对象创建完成后就可以将渐变对象赋值给 fillStyle strokeStyle 来通过渐变绘制图像

 

// 绘制渐变矩形
context.fillStyle = gradient;
context.fillRect(30,30,50,50);

 

 

而如果需要使用径向渐变,则需要使用 createRadialGradient() 方法

该方法接收6个参数:

  1. 起点圆的圆心x坐标
  2. 起点圆的圆心y坐标
  3. 起点圆的圆半径
  4. 终点圆的圆心x坐标
  5. 终点圆的圆心y坐标
  6. 终点圆的圆半径
var gradient = context.createRadialGradient(30,30.10,30,30,20);

gradient.addColorStop(0,"white");
gradient.addColorStop(1,"black");

context.fillStyle = gradient;
context.fillRect(30,30,50,50);

 

内容总结

以上是互联网集市为您收集整理的Javascript高级编程学习笔记（92）—— Canvas(9) 渐变全部内容，希望文章能够帮你解决Javascript高级编程学习笔记（92）—— Canvas(9) 渐变所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/836023.html

来源：【匿名】