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 相关文章推荐
仿服务器端脚本方式的JS模板实现方法
Apr 27 Javascript
setTimeout 不断吐食CPU的问题分析
Apr 01 Javascript
js监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
jQuery+PHP星级评分实现方法
Oct 02 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
浅析2种JavaScript继承方式
Dec 04 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
ES6新特性四:变量的解构赋值实例
Apr 21 Javascript
switchery按钮的使用方法
Dec 18 Javascript
JQuery animate动画应用示例
May 14 jQuery
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
PHP7.0安装笔记整理
2015/08/28 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
原生javascript和jquery判断浏览器版本等信息
2013/07/04 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
基于Vue实现拖拽效果
2018/04/27 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
vue+element表格导出为Excel文件
2019/09/26 Javascript
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
python正则分析nginx的访问日志
2017/01/17 Python
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
python中关于for循环的碎碎念
2017/06/30 Python
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
Python的log日志功能及设置方法
2019/07/11 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
python实现超级马里奥
2020/03/18 Python
Django框架请求生命周期实现原理
2020/11/13 Python
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
地球鞋加拿大官网:Earth Shoes Canada
2020/11/17 全球购物
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
毕业生怎样写好自荐信
2013/11/11 职场文书
绩效工资分配方案
2014/01/18 职场文书
初一生物教学反思
2014/01/18 职场文书
小学生作文评语集锦
2014/12/25 职场文书
作文评语怎么写
2014/12/25 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书
Python类方法总结讲解
2021/07/26 Python