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 09 HTML / CSS
CSS3媒体查询(Media Queries)介绍
Sep 12 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 HTML / CSS
详解canvas在圆弧周围绘制文本的两种写法
May 22 HTML / CSS
把富文本的回车转为br标签
Aug 09 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 HTML / CSS
html5实现多文件的上传示例代码
Feb 13 HTML / CSS
关于HTML5语义标签的实践(blog页面)
Jul 12 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 HTML / CSS
html5.2 dialog简介详解
Feb 27 HTML / CSS
纯CSS3实现div按照顺序出入效果
Jul 15 HTML / CSS
使用CSS设置滚动条样式
Jan 18 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
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
php session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
php实现过滤UBB代码的类
2015/03/12 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
js倒计时小程序
2013/11/05 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
微信小程序实现转盘抽奖
2020/09/21 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
Python可变参数用法实例分析
2017/04/02 Python
python入门教程 python入门神图一张
2018/03/05 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
Django中reverse反转并且传递参数的方法
2019/08/06 Python
意大利综合购物网站:Giordano Shop
2016/10/21 全球购物
日语专业推荐信
2013/11/12 职场文书
自荐书模板
2013/12/15 职场文书
护士自我评价
2014/02/01 职场文书
学校班班通实施方案
2014/06/11 职场文书
司机工作自我鉴定
2014/09/19 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
高中政治教师教学反思
2016/02/23 职场文书
详解Go语言中Get/Post请求测试
2022/06/01 Golang