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 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
javascript 动态设置已知select的option的value值的代码
Dec 16 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
jquery tab插件精简版分享
Sep 10 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
Jun 28 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 Javascript
JavaScript及jquey实现多个数组的合并操作
Sep 06 Javascript
一个JavaScript用逗号分割字符串实例
Sep 22 Javascript
js实现模糊匹配功能
Feb 15 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 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
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
利用PHP获取访客IP、地区位置、浏览器及来源页面等信息
2017/06/27 PHP
PHP微商城开源代码实例
2019/03/27 PHP
php中文语义分析实现方法示例
2019/09/28 PHP
PHP高并发和大流量解决方案整理
2021/03/09 PHP
JS 的应用开发初探(mootools)
2009/12/19 Javascript
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
使用JavaScript和C#中获得referer
2014/11/14 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
2016/01/23 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
详解Bootstrap各式各样的按钮(推荐)
2016/12/13 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
详解JavaScript中的数组合并方法和对象合并方法
2018/05/11 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
python服务器端收发请求的实现代码
2014/09/29 Python
使用Python写CUDA程序的方法
2017/03/27 Python
Python实现购物车购物小程序
2018/04/18 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
HTML5 input元素类型:email及url介绍
2013/08/13 HTML / CSS
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
找到不普通的东西:Bonanza
2016/10/20 全球购物
Internet体系结构
2014/12/21 面试题
如何写你的创业计划书
2014/01/07 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
汽车4S店销售经理岗位职责
2015/04/02 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书