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 用border写 空心三角箭头 (两种写法)
Sep 29 HTML / CSS
详解CSS3开启硬件加速的使用和坑
Aug 21 HTML / CSS
css3学习心得分享
Aug 19 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 HTML / CSS
html5使用canvas画一条线
Dec 15 HTML / CSS
浅谈html5增强的页面元素
Jun 14 HTML / CSS
HTML5实现音频和视频嵌入的方法
Aug 22 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
Jul 26 HTML / CSS
canvas实现烟花的示例代码
Jan 16 HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 30 HTML / CSS
CSS基础详解
Oct 16 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
Notice: Trying to get property of non-object problem(PHP)解决办法
2012/03/11 PHP
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
Jquery 在页面加载后执行的几种方式
2014/03/14 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
基于javascript html5实现3D翻书特效
2016/03/14 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
Swiper实现轮播图效果
2017/07/03 Javascript
使用vue-cli导入Element UI组件的方法
2018/05/16 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
python实现sublime3的less编译插件示例
2014/04/27 Python
详解Python中的__new__()方法的使用
2015/04/09 Python
Python高级特性切片(Slice)操作详解
2018/09/27 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
python开根号实例讲解
2020/08/30 Python
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
公积金转移接收函
2014/01/11 职场文书
一岗双责责任书
2014/04/15 职场文书
爱国演讲稿500字
2014/05/04 职场文书
质量标语大全
2014/06/12 职场文书
儿园租房协议书范本
2014/12/02 职场文书
大学生自荐书范文
2015/03/05 职场文书
详解nginx location指令
2022/01/18 Servers
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android