JavaScript canvas绘制渐变颜色的矩形

更新时间：2020年02月18日 09:31:03 作者：码农阳神

这篇文章主要为大家详细介绍了JavaScript canvas绘制渐变颜色的矩形，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了canvas绘制渐变颜色的矩形的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 canvas {
  border: 1px solid #ccc;
 }
/* .linearGradient{
  width: 400px;
  height: 100px;
  background-image: linear-gradient(to right,pink,blue);
 }*/
 </style>
</head>
<body>
<div class="linearGradient"></div>
<canvas width="600" height="400"></canvas>
<script>
 var myCanvas = document.querySelector('canvas');
 var ctx = myCanvas.getContext('2d');
 /*fillStyle 'pink' '#000' 'rgb()' 'rgba()' */
 /*也可以使用一个渐变的方案了填充矩形*/
 /*创建一个渐变的方案*/
 /*渐变是由长度的*/
 /*x0y0 起始点 x1y1 结束点 确定长度和方向*/
 var linearGradient = ctx.createLinearGradient(100,100,500,400);
 linearGradient.addColorStop(0,'pink');
 //linearGradient.addColorStop(0.5,'red');
 linearGradient.addColorStop(1,'blue');
 ctx.fillStyle = linearGradient;
 ctx.fillRect(100,100,400,100);
 /*pink---->blue*/
 /*回想线性渐变---->要素 方向 起始颜色 结束颜色 */
 /*通过两个点的坐标可以控制 渐变方向*/
</script>
</body>
</html>

运行结果如下:

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

JS小游戏之宇宙战机源码详解
这篇文章主要介绍了JS小游戏之宇宙战机源码,是一款非常经典的游戏源码,包含了游戏设计中比较常见的逻辑处理,本文附带了该游戏的完整源码,需要的朋友可以参考下
2014-09-09
JavaScript中扩展Array contains方法实例
这篇文章主要介绍了JavaScript中扩展Array contains方法实例,本文直接给出实现代码,需要的朋友可以参考下
2015-03-03
清除网页历史记录，屏蔽后退按钮!
浏览器的后退按钮使得我们能够方便地返回以前访问过的页面，它无疑非常有用。但有时候我们不得不关闭这个功能，以防止用户打乱预定的页面访问次序。
2008-12-12
Js参数RSA加密传输之jsencrypt.js的使用
这篇文章主要介绍了Js参数RSA加密传输之jsencrypt.js的使用,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2020-02-02
uniapp调用百度语音实现录音转文字功能
这篇文章主要介绍了uniapp通过调用百度语音，实现录音转文字的功能。文中的示例代码对我们学习或工作有一定的帮助，感兴趣的小伙伴可以跟随小编学习一下
2021-12-12
Lab.js初次使用笔记
这篇文章主要介绍了Lab.js初次使用笔记,本文对比了普通动态加载JS文件的技术和使用Lab.js加载JS文件的技术,并给出了Lab.js加载示例,需要的朋友可以参考下
2015-02-02
boostrapTable的refresh和refreshOptions区别浅析
在使用bootstrapTable时，刷新数据有两个方法refresh、refreshOptions，在其用法上有点区别，接下来通过本文给大家分享boostrapTable的refresh和refreshOptions的区别,需要的朋友可以参考下
2017-01-01
如何从零开始利用js手写一个Promise库详解
ES2015 推出了JS 的 Promise ，而在没有原生支持的时候，我们也可以使用诸如 Promises/A+ 的库的帮助，在我们的代码里实现Promise 的支持，下面这篇文章主要给大家介绍了如何从零开始利用js手写一个Promise库的相关资料，需要的朋友可以参考下。
2018-04-04
JavaScript实现更换头像功能
这篇文章主要为大家详细介绍了JavaScript实现更换头像功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
javascript跨浏览器的属性判断方法
这篇文章主要介绍了javascript跨浏览器的属性判断的方法,需要的朋友可以参考下
2014-03-03