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实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
CSS实现定位元素居中的方法
Jun 23 HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
Jun 20 HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
May 31 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
Apr 24 HTML / CSS
使用HTML5做个画图板的方法介绍
May 03 HTML / CSS
HTML5的一个显示电池状态的API简介
Jun 18 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 HTML / CSS
iframe跨域的几种常用方法
Nov 11 HTML / CSS
5分钟实现Canvas鼠标跟随动画背景
Nov 18 HTML / CSS
html+css实现分层金字塔的实例
Jun 02 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 session处理的定制
2009/03/16 PHP
php 静态化实现代码
2009/03/20 PHP
探讨多键值cookie(php中cookie存取数组)的详解
2013/06/06 PHP
php-fpm配置详解
2014/02/12 PHP
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
学习PHP session的传递方式
2016/06/15 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
跟我学习javascript的this关键字
2020/05/28 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
python获取当前时间对应unix时间戳的方法
2015/05/15 Python
Django实现图片文字同时提交的方法
2015/05/26 Python
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
使用paramiko远程执行命令、下发文件的实例
2017/10/01 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
python中def是做什么的
2020/06/10 Python
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
教师群众路线剖析材料
2014/09/29 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
Python基础之Socket通信原理
2021/04/22 Python
python 判断文件或文件夹是否存在
2022/03/18 Python