HTML5创建线条渐变
2015-12-10 14:24
597 查看
1、设计源码
[html] view
plaincopy
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5创建线条渐变</title>
<script type="text/javascript">
/**
* 创建线条渐变
*/
function drawGradualText()
{
//找到<canvas>元素
var canvas = document.getElementById("canvas");
//创建context对象
var ctx = canvas.getContext("2d");
//创建线条渐变
var gradient = ctx.createLinearGradient(0,0,400,0);
//方法规定 gradient 对象中的颜色和位置
gradient.addColorStop(0,"yellow");
//方法规定 gradient 对象中的颜色和位置
gradient.addColorStop(1,"blue");
//设置填充样式
ctx.fillStyle = gradient;
//填充一个矩形区域
ctx.fillRect(40,20,600,400);
}
</script>
</head>
<body onLoad="drawGradualText();">
<canvas id="canvas" width="1000" height="800"></canvas>
</body>
</html>
2、实现结果
![](https://img-blog.csdn.net/20151129120011742?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
3、源码说明
(1)找到<canvas>元素
[javascript] view
plaincopy
var canvas = document.getElementById("canvas");
(2)创建context对象
[javascript] view
plaincopy
var ctx = canvas.getContext("2d");
(3)创建线条渐变
[javascript] view
plaincopy
var gradient = ctx.createLinearGradient(0,0,400,0);
(4)规定 gradient 对象中的颜色和位置
[javascript] view
plaincopy
gradient.addColorStop(0,"yellow");
gradient.addColorStop(1,"blue");
(5)设置填充样式
[javascript] view
plaincopy
ctx.fillStyle = gradient;
(6)填充一个矩形区域
[javascript] view
plaincopy
ctx.fillRect(40,20,600,400);
转载自:http://blog.csdn.net/you23hai45/article/details/50095051
[html] view
plaincopy
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5创建线条渐变</title>
<script type="text/javascript">
/**
* 创建线条渐变
*/
function drawGradualText()
{
//找到<canvas>元素
var canvas = document.getElementById("canvas");
//创建context对象
var ctx = canvas.getContext("2d");
//创建线条渐变
var gradient = ctx.createLinearGradient(0,0,400,0);
//方法规定 gradient 对象中的颜色和位置
gradient.addColorStop(0,"yellow");
//方法规定 gradient 对象中的颜色和位置
gradient.addColorStop(1,"blue");
//设置填充样式
ctx.fillStyle = gradient;
//填充一个矩形区域
ctx.fillRect(40,20,600,400);
}
</script>
</head>
<body onLoad="drawGradualText();">
<canvas id="canvas" width="1000" height="800"></canvas>
</body>
</html>
2、实现结果
3、源码说明
(1)找到<canvas>元素
[javascript] view
plaincopy
var canvas = document.getElementById("canvas");
(2)创建context对象
[javascript] view
plaincopy
var ctx = canvas.getContext("2d");
(3)创建线条渐变
[javascript] view
plaincopy
var gradient = ctx.createLinearGradient(0,0,400,0);
(4)规定 gradient 对象中的颜色和位置
[javascript] view
plaincopy
gradient.addColorStop(0,"yellow");
gradient.addColorStop(1,"blue");
(5)设置填充样式
[javascript] view
plaincopy
ctx.fillStyle = gradient;
(6)填充一个矩形区域
[javascript] view
plaincopy
ctx.fillRect(40,20,600,400);
转载自:http://blog.csdn.net/you23hai45/article/details/50095051
相关文章推荐
- HTML5 Canvas八大核心技术及其API用法
- 10款基于HTML5+CSS3实现的超酷源码动画
- html5 canvas绘制圆形进度实例
- Html5中的跨页面消息传输
- 用html5 Canvas制作一个简单的游戏 英雄抓小怪物(上)
- HTML5之File文件操作
- html5监听屏幕旋转
- HTML5动画/游戏神器---AlloyStick
- 巧用Html5 History Api解决SPA的SEO问题
- HTML5之一——新标签
- HTML5离线应用与客户端存储
- h5与原生代码交互
- 打造H5动感影集的爱恨情仇–动画性能篇
- HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
- HTML5之废弃和更新的元素与属性
- 实例讲解HTML5的meta标签的一些应用
- html5学习:轮播图
- HTML5 本地存储 LocalStorage
- 推荐10款非常优秀的HTML5开发工具
- HTML4和HTML5之间的10个主要不同的地方