HTML5画渐变背景图片并自动下载实现步骤


Posted in HTML / CSS onNovember 18, 2013

drawBgLine.html

复制代码
代码如下:

<!DOCTYPE html>
<head>
<meta charset="UTF-8"/>
<title>html5画渐变背景图片,并自动下载</title>
</head>
<body>
<center>
<canvas id="c" width="1" height="200" ></canvas>
</center>
<script>
//第一步:获取canvas对象
var c = document.getElementById("c");
//第二步:获取canvas对象的上下文对象
var context = c.getContext("2d");
/*
* 这些是画其他图形代码
context.beginPath();
context.lineWidth=10;
context.strokeStyle="red";
context.moveTo(50,50);
context.lineTo(150,50);
context.stroke();
context.closePath();
//context.strokeRect(220,50,50,50);
context.fillStyle="blue";
context.fillRect(220,50,50,50);
context.beginPath();
context.arc(150,150,50,0*Math.PI/180,-180*Math.PI/180,false);
context.lineTo(150,150);
context.closePath();
context.stroke();
context.lineWidth=1;
context.font="50px 宋体";
context.fillText("briup",0,220);
context.save();
context.translate(50,50);
context.rotate(90*Math.PI/180);
context.beginPath();
context.lineWidth=10;
context.strokeStyle="red";
context.moveTo(0,0);
context.lineTo(100,0);
context.stroke();
context.closePath();
context.restore();
*/
var g = context.createLinearGradient(0,0,0,200);
g.addColorStop(0,"90BFFF");
g.addColorStop(1,"white");
context.fillStyle = g;
context.fillRect(0,0,1,200);
window.location = c.toDataURL("image/jpeg").replace("image/jpeg","image/octet-stream");
</script>
</body>
HTML / CSS 相关文章推荐
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
Jul 15 HTML / CSS
使用CSS3来绘制一个月食图案
Jul 18 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
Aug 22 HTML / CSS
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
Jan 23 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
May 14 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
HTML5实现无刷新修改URL的方法
Nov 14 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
Dec 08 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 18 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
Nov 18 #HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
Nov 18 #HTML / CSS
HTML5语音识别标签写法附图
Nov 18 #HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
Nov 12 #HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
Nov 07 #HTML / CSS
html5跨域通讯之postMessage的用法总结
Nov 07 #HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 #HTML / CSS
You might like
PHP获取redis里不存在的6位随机数应用示例【设置24小时过时】
2017/06/07 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
JS的千分位算法实现思路
2013/07/31 Javascript
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
jQuery控制Div拖拽效果完整实例分析
2015/04/15 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
利用Python开发实现简单的记事本
2016/11/15 Python
解决uWSGI的编码问题详解
2017/03/24 Python
深入理解Django中内置的用户认证
2017/10/06 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
对python3 中方法各种参数和返回值详解
2018/12/15 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
利用python求积分的实例
2019/07/03 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
民政局办理协议离婚(范本)
2014/10/25 职场文书
教师节主持词开场白
2015/05/29 职场文书
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python