html5教程实现Photoshop渐变色效果


Posted in HTML / CSS onDecember 04, 2013

复制代码
代码如下:

<!DOCTYPE html><head>
<meta charset=utf-8>
<title>HTML5画线、圆、矩形</title>
<script src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script">http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script</a>>
</head>
<script>
$(document).ready(function(){
var c=document.getElementById("drawbox");
var draw=c.getContext("2d"); //获取2d内容的引用,调用绘图API</p> <p>//指定渐变区块
var grd=draw.createLinearGradient(50,50,200,50); //坐标,长宽
grd.addColorStop(0,"black"); //起点颜色
grd.addColorStop(1,"green"); //终点颜色</p> <p>draw.fillStyle=grd; //设为填充样式
draw.fillRect(50,50,200,50); //填充进矩形内
})
</script>
</body>
<canvas id="drawbox" width="500" height="500"></canvas>
</body>
</html>

效果图:

html5教程实现Photoshop渐变色效果

HTML / CSS 相关文章推荐
简单掌握CSS3将文字描边及填充文字颜色的方法
Mar 07 HTML / CSS
推荐一些比较有用的css3新属性
Nov 11 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
Aug 31 HTML / CSS
CSS3实现各种图形的示例代码
Oct 19 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
Jun 27 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 HTML / CSS
web前端之css水平居中代码解析
May 20 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 #HTML / CSS
html5教程画矩形代码分享
Dec 04 #HTML / CSS
html5教程制作简单画板代码分享
Dec 04 #HTML / CSS
html5 viewport使用方法示例详解
Dec 02 #HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 #HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
Nov 29 #HTML / CSS
HTML5样式控制示例代码
Nov 27 #HTML / CSS
You might like
php Smarty date_format [格式化时间日期]
2010/03/15 PHP
一个PHP的QRcode类与大家分享
2011/11/13 PHP
PHP获取windows登录用户名的方法
2014/06/24 PHP
YII中assets的使用示例
2014/07/31 PHP
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
jquery怎样实现ajax联动框(一)
2013/03/08 Javascript
js中单引号与双引号冲突问题解决方法
2013/10/04 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
2020/04/10 Javascript
常见的python正则用法实例讲解
2016/06/21 Python
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
德国高性价比网上药店:medpex
2017/07/09 全球购物
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
大学生入党自我鉴定
2013/10/31 职场文书
节能减排倡议书
2014/04/15 职场文书
工厂车间标语
2014/06/19 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
党校个人总结
2015/03/04 职场文书
大学生实习推荐信
2015/03/27 职场文书
企业财务管理制度范本
2015/08/04 职场文书
小学数学教学反思范文
2016/02/16 职场文书
求职自我评价参考范文
2019/05/16 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
分享7个 Python 实战项目练习
2022/03/03 Python