JavaScript+html5 canvas绘制渐变区域完整实例


Posted in Javascript onJanuary 26, 2016

本文实例讲述了JavaScript+html5 canvas绘制渐变区域的方法。分享给大家供大家参考,具体如下:

运行效果截图如下:

JavaScript+html5 canvas绘制渐变区域完整实例

具体代码如下:

<!DOCTYPE html>
<html>
 <head>
  <title>demo</title>
  <style type="text/css">
   #canvas {
    border:3px solid gray;
   }
  </style>
 </head>
 <body>
  <canvas id="canvas" width="500px" height="500px"></canvas>
 </body>
 <script type="text/javascript">
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.rect(0, 0, 200, 200);
  ctx.closePath();
  var gradient = ctx.createLinearGradient(0, 0, 200, 200);
  gradient.addColorStop(0, "gray");
  gradient.addColorStop(0.5, "red");
  gradient.addColorStop(1, "blue");
  ctx.fillStyle = gradient;
  ctx.fill();
 </script>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
基于jQuery实现下拉收缩(展开与折叠)特效
Dec 25 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
JavaScrip常见的一些算法总结
Dec 28 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
激动人心的 Angular HttpClient的源码解析
Jul 10 Javascript
彻底理解js面向对象之继承
Feb 04 Javascript
JavaScript类的继承操作实例总结
Dec 20 Javascript
JS实现骰子3D旋转效果
Oct 24 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 Javascript
JS数组方法some、every和find的使用详情
Oct 05 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 #Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 #Javascript
JS组件Bootstrap Select2使用方法详解
Apr 17 #Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 #Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 #Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 #Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 #Javascript
You might like
消息持续发送的完整例子
2006/10/09 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
JS命名空间的另一种实现
2013/08/09 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
JS+html5制作简单音乐播放器
2020/09/13 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
原生JS实现不断变化的标签
2017/05/22 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
vue-router 起步步骤详解
2019/03/26 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
python中星号变量的几种特殊用法
2016/09/07 Python
Python 多进程和数据传递的理解
2017/10/09 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
Django框架实现的分页demo示例
2019/05/25 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
Python json格式化打印实现过程解析
2020/07/21 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
人力管理专业毕业生求职信
2014/02/27 职场文书
环保建议书500字
2014/05/14 职场文书
国贸专业毕业求职信
2014/06/11 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
银行职员工作失误检讨书
2014/10/14 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
2015年副班长工作总结
2015/05/15 职场文书
python套接字socket通信
2022/04/01 Python
Redis主从复制操作和配置详情
2022/09/23 Redis