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实现转换过渡和动画效果
Mar 13 HTML / CSS
HTML5仿手机微信聊天界面
Mar 18 HTML / CSS
html5文字阴影效果text-shadow使用示例
Jul 25 HTML / CSS
五个2015 年最佳HTML5 框架
Nov 11 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
Dec 30 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
Feb 28 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
Mar 15 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 HTML / CSS
如何通过 CSS 写出火焰效果
Mar 24 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中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
php 基础函数
2017/02/10 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
列表内容的选择
2006/06/30 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
DOM基础教程之事件类型
2015/01/20 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
JavaScript对Json的增删改属性详解
2016/06/02 Javascript
ionic开发中点击input时键盘自动弹出
2016/12/23 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Windows下搭建python开发环境详细步骤
2020/07/20 Python
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
用Python配平化学方程式的方法
2019/07/20 Python
Python生态圈图像格式转换问题(推荐)
2019/12/02 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
美国体育用品商店:Academy Sports + Outdoors
2020/01/04 全球购物
社会学专业求职信
2014/02/24 职场文书
企业后勤岗位职责
2014/02/28 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
社区安置帮教工作总结2015
2015/05/20 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
合作合同协议书
2016/03/21 职场文书
浅谈Python3中datetime不同时区转换介绍与踩坑
2021/08/02 Python
MyBatis 动态SQL全面详解
2021/10/05 MySQL