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 简单又实用的5个属性
Mar 04 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
HTML5 canvas基本绘图之绘制线段
Jun 27 HTML / CSS
Html5上传图片 移动端、PC端通用代码
Jun 08 HTML / CSS
html5 application cache遇到的严重问题
Dec 26 HTML / CSS
HTML5 embed标签定义和用法详解
May 09 HTML / CSS
HTML5 新表单类型示例代码
Mar 20 HTML / CSS
HTML5实现移动端复制功能
Apr 19 HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
May 13 HTML / CSS
HTML5 3D旋转相册的实现示例
Dec 03 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 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转换IP地址到真实地址的方法详解
2013/06/09 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
JS二叉树的简单实现方法示例
2017/04/05 Javascript
纯js实现的积木(div层)拖动功能示例
2017/07/19 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
python的几种矩阵相乘的公式详解
2019/07/10 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
Ratchet 模态框的实现
2020/08/19 HTML / CSS
欧洲最大的婴幼儿服装及内衣公司:Petit Bateau(小帆船)
2016/08/16 全球购物
.NET现在共支持多少种语言
2014/02/26 面试题
电气自动化自荐信
2013/10/10 职场文书
三年级语文教学反思
2014/02/01 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
委托培训协议书
2014/11/17 职场文书
2014年评职称工作总结
2014/11/20 职场文书
Django migrate报错的解决方案
2021/05/20 Python
Mysql官方性能测试工具mysqlslap的使用简介
2021/05/21 MySQL
如何判断pytorch是否支持GPU加速
2021/06/01 Python
教你一步步实现一个简易promise
2021/11/02 Javascript
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js