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模块的目前的状况分析
Feb 24 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
Aug 15 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
Nov 06 HTML / CSS
详解css3中的伪类before和after常见用法
Nov 17 HTML / CSS
HTML5 Canvas概述
Aug 26 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
May 03 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
Dec 30 HTML / CSS
HTML5中原生的右键菜单创建方法
Jun 28 HTML / CSS
a标签下载链接的简单实现
Sep 13 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
Dec 28 HTML / CSS
浅谈为什么我的 z-index 又不生效了
Jul 15 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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
php getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
php防止sql注入简单分析
2015/03/18 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
php支付宝在线支付接口开发教程
2016/09/19 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
vue动态设置页面title的方法实例
2020/08/23 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
python之验证码生成(gvcode与captcha)
2019/01/02 Python
Python中常用的内置方法
2019/01/28 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
python TCP包注入方式
2020/05/05 Python
Python调用飞书发送消息的示例
2020/11/10 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
新西兰网上购物,折扣店:BestDeals.co.nz
2019/03/20 全球购物
联想C++笔试题
2012/06/13 面试题
关于毕业的中学校园广播稿
2014/01/26 职场文书
详解MySQL的Seconds_Behind_Master
2021/05/18 MySQL
swagger如何返回map字段注释
2021/07/03 Java/Android