JavaScript canvas绘制渐变颜色的矩形


Posted in Javascript onFebruary 18, 2020

本文实例为大家分享了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>

运行结果如下:

JavaScript canvas绘制渐变颜色的矩形

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery动态改变form属性提交表单
Jun 03 Javascript
JS模式之单例模式基本用法
Jun 30 Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 Javascript
javascript实现表单验证
Jan 29 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
用js写的一个路由(简单实例)
Sep 24 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 Javascript
Vue实现点击时间获取时间段查询功能
Aug 21 Javascript
vue实现简单的星级评分组件源码
Nov 16 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
Feb 06 Javascript
vue接口请求加密实例
Aug 11 Javascript
JavaScript canvas绘制折线图
Feb 18 #Javascript
node+multer实现图片上传的示例代码
Feb 18 #Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 #Javascript
javascript中的with语句学习笔记及用法
Feb 17 #Javascript
JS实现百度搜索框关键字推荐
Feb 17 #Javascript
js实现百度淘宝搜索功能
Feb 17 #Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 #Javascript
You might like
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
php函数式编程简单示例
2019/08/08 PHP
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
让checkbox不选中即将选中的checkbox不选中
2014/07/11 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
JavaScript实现刷新不重记的倒计时
2016/08/10 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
Python读写ini文件的方法
2015/05/28 Python
构建Python包的五个简单准则简介
2015/06/15 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
Python使用urllib模块对URL网址中的中文编码与解码实例详解
2020/02/18 Python
python实现KNN近邻算法
2020/12/30 Python
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
建筑文秘专业个人求职信范文
2013/12/28 职场文书
物理教学随笔感言
2014/02/22 职场文书
大学生怎样写好自荐信
2014/02/25 职场文书
2014年班务工作总结
2014/12/02 职场文书
网络妈妈观后感
2015/06/08 职场文书
大学升旗仪式主持词
2015/07/04 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书