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 相关文章推荐
一个js实现的所谓的滑动门
May 23 Javascript
编写可维护面向对象的JavaScript代码[翻译]
Feb 12 Javascript
JS代码优化技巧之通俗版(减少js体积)
Dec 23 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
在bootstrap中实现轮播图实例代码
Jun 11 Javascript
JS算法教程之字符串去重与字符串反转
Dec 15 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
《PHP编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
PHP 实现类似js中alert() 提示框
2015/03/18 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
jQuery select操作控制方法小结
2010/05/26 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
JS实现简单的星期格式转换功能示例
2018/07/23 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
javascript实现计算器功能
2020/03/30 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
Python读取csv文件分隔符设置方法
2019/01/14 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
自我评价是什么
2014/01/04 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
餐厅服务员管理制度
2015/08/05 职场文书
股权投资协议书
2016/03/23 职场文书
详解Mysql和Oracle之间的误区
2021/05/18 MySQL