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 相关文章推荐
使用css3匹配手机屏幕横竖状态
Jan 27 HTML / CSS
CSS3 Media Queries详细介绍和使用实例
May 08 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
May 09 HTML / CSS
html5弹跳球示例代码
Jul 23 HTML / CSS
HTML5和以前HTML4的区别整理
Oct 20 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
详解HTML5 window.postMessage与跨域
May 11 HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 HTML / CSS
HTML5自定义属性的问题分析
Aug 16 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 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
简单易用的计数器(数据库)
2006/10/09 PHP
php xml常用函数的集合(比较详细)
2013/06/06 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
php获取linux命令结果的实例
2017/03/13 PHP
PHP实现简单登录界面
2019/10/23 PHP
jQuery代码优化之基本事件
2011/11/01 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
JS获得一个对象的所有属性和方法实例
2017/02/21 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
Python中关于使用模块的基础知识
2015/05/24 Python
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
python2.7实现邮件发送功能
2018/12/12 Python
python 调用有道api接口的方法
2019/01/03 Python
Appium+python自动化怎么查看程序所占端口号和IP
2019/06/14 Python
使用Python函数进行模块化的实现
2019/11/15 Python
python随机生成库faker库api实例详解
2019/11/28 Python
CSS3支持IE6, 7, and 8的边框border属性
2012/12/28 HTML / CSS
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
优秀党员转正的自我评价
2013/10/06 职场文书
治庸问责心得体会
2014/09/12 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
安全先进个人材料
2014/12/29 职场文书
校长师德表现自我评价
2015/03/04 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
《废话连篇——致新手》——chinapizza
2022/04/05 无线电
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python