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 相关文章推荐
服务器安全设置的几个注册表设置
Jul 28 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
Node.js 中使用 async 函数的方法
Nov 20 Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
vue实现移动端图片上传功能
Dec 23 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 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
松下Panasonic RF-B65电路分析
2021/03/02 无线电
递归列出所有文件和目录
2006/10/09 PHP
php错误级别的设置方法
2013/06/17 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
jQuery 浮动广告实现代码
2008/12/25 Javascript
JavaScript解析URL参数示例代码
2013/08/12 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
Jquery操作Ajax方法小结
2015/11/29 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
AngularJS 视图详解及示例代码
2016/08/17 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
python遍历小写英文字母的方法
2019/01/02 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
Linux的文件类型
2012/03/07 面试题
2014年自我评价
2014/01/04 职场文书
老总助理工作岗位职责
2014/02/06 职场文书
主管会计岗位责任制
2014/02/10 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
2019年幼儿园管理条例范本!
2019/07/17 职场文书