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 滤镜 webkit-filter详细介绍及使用方法
Dec 27 HTML / CSS
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
非常震撼的纯CSS3人物行走动画
Feb 24 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
CSS3选择器新增问题的实现
Jan 21 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Jan 21 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
Jan 29 HTML / CSS
配置H5的滚动条样式的示例代码
Mar 09 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 HTML / CSS
Html5移动端网页端适配(js+rem)
Feb 03 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基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
php中cookie的使用方法
2014/03/29 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
通过event对象的fromElement属性解决热区设置主实体的一个bug
2008/12/22 Javascript
js AspxButton的客户端操作
2009/06/26 Javascript
jquery tools 系列 scrollable学习
2009/09/06 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
js控制div弹出层实现方法
2015/05/11 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
python使用KNN算法手写体识别
2018/02/01 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
总结python中pass的作用
2019/02/27 Python
Python调用.NET库的方法步骤
2019/12/27 Python
django的模型类管理器——数据库操作的封装详解
2020/04/01 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
部队领导证婚词
2014/01/12 职场文书
人力资源作业细则
2014/03/03 职场文书
保险公司年会主持词
2014/03/22 职场文书
六一亲子活动总结
2014/07/01 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
大学毕业生个人总结
2015/02/28 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
贫困生证明范文
2015/06/16 职场文书
javascript的var与let,const之间的区别详解
2022/02/18 Javascript
使用Ajax实现无刷新上传文件
2022/04/12 Javascript