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 相关文章推荐
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
Sep 12 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
JS 操作Array数组的方法及属性实例解析
Jan 08 Javascript
JavaScript中Function()函数的使用教程
Jun 04 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 Javascript
重新认识vue之事件阻止冒泡的实现
Aug 02 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 Javascript
Vue深入理解插槽slot的使用
Aug 05 Vue.js
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
如何用phpmyadmin设置mysql数据库用户的权限
2012/01/09 PHP
php对二维数组进行排序的简单实例
2013/12/19 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
微信支付开发告警通知实例
2016/07/12 PHP
Android AsyncTack 异步任务实例详解
2016/11/02 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
2016/06/06 Javascript
js replace()去除代码中空格的实例
2017/02/14 Javascript
微信小程序实现YDUI的ScrollTab组件
2018/02/02 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
Python中的异常处理相关语句基础学习笔记
2016/07/11 Python
Python操作Access数据库基本步骤分析
2016/09/19 Python
开源Web应用框架Django图文教程
2017/03/09 Python
python生成器与迭代器详解
2019/01/01 Python
kali中python版本的切换方法
2019/07/11 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
HTML5中FileReader接口使用方法实例详解
2017/08/26 HTML / CSS
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
ORACLE第二个十问
2013/12/14 面试题
税务专业毕业生自荐信
2013/11/10 职场文书
超级搞笑检讨书
2014/01/15 职场文书
小学家长学校培训材料
2014/08/24 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP
nginx容器方式反向代理实战
2022/04/18 Servers