[js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置
接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续.
一、线形渐变
线形渐变指的是一条直线上发生的渐变。
用法：
var linear = cxt.createLinearGradient( x1, y1, x2, y2 );
linear.addColorStop( value1, color1 );
linear.addColorStop( value2, color2 );
.....
oGc.fillStyle = linear
oGc.fill();
1) createLinearGradient创建一个线形渐变对象. x1, y1表示渐变的起点. x2, y2表示渐变的终点.
2)addColorStop在某处添加渐变颜色值
3)fillStyle：把渐变对象作为填充样式
4)调用fill及其他相关图形进行渐变填充
水平渐变
<head>
<meta charset='utf-8' />
<style>
#canvas{
border:1px dashed #aaa;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' );
var linear = oGc.createLinearGradient( 0, 400, 500, 400 );
linear.addColorStop( 0, 'red' );
linear.addColorStop( 1, '#09f' );
oGc.fillStyle = linear;
oGc.fillRect( 0, 0, 500, 400 );
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="400"></canvas>
</body>
垂直渐变：
<head>
<meta charset='utf-8' />
<style>
#canvas{
border:1px dashed #aaa;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' );
var linear = oGc.createLinearGradient( 400, 0, 400, 500 );
linear.addColorStop( 0, 'red' );
linear.addColorStop( 1, '#09f' );
oGc.fillStyle = linear;
oGc.fillRect( 0, 0, 500, 400 );
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="400"></canvas>
</body>
对角线渐变：
<head>
<meta charset='utf-8' />
<style>
#canvas{
border:1px dashed #aaa;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' );
var linear = oGc.createLinearGradient( 0, 0, 400, 500 );
linear.addColorStop( 0, 'red' );
linear.addColorStop( 1, '#09f' );
oGc.fillStyle = linear;
oGc.fillRect( 0, 0, 500, 400 );
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="400"></canvas>
</body>
为文字添加线形渐变效果
<head>
<meta charset='utf-8' />
<style>
#canvas{
border:1px dashed #aaa;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ),
text = '跟着ghostwu学习html5 canvas教程'; oGc.font = '22px bold 微软雅黑';
var linear = oGc.createLinearGradient( 20, 100, 400, 100 );
linear.addColorStop( 0, 'red' );
linear.addColorStop( 1, '#09f' );
oGc.fillStyle = linear;
oGc.fillText( text, 50, 100 );
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="400"></canvas>
</body>
二、径向渐变
颜色渐变从一个起点向各个方向渐变，用法跟线形渐变差不多，只不过创建渐变的时候用的是另一个函数
var radial = cxt.createRadialGradient( x1, y1, r1, x2, y2, r2 )
....下面的步骤跟线形渐变一样，不再重复了
x1, y1起始点的圆心坐标，r1: 起始点 圆的半径
x2，y2结束点的圆心坐标，r2:结束点 圆所在的半径
<head>
<meta charset='utf-8' />
<style>
#canvas{
border:1px dashed #aaa;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ),
width = oCanvas.width, height = oCanvas.height; oGc.beginPath();
oGc.arc( 100, 100, 100, 0, 360 * Math.PI / 180, false );
oGc.closePath(); var radial = oGc.createRadialGradient( 150, 50, 10, 100, 100, 100 );
radial.addColorStop( 0.1, 'white' );
radial.addColorStop( 0.6, 'orange' );
radial.addColorStop( 1, 'red' );
oGc.fillStyle = radial;
oGc.fill(); oGc.beginPath();
oGc.arc( 320, 100, 100, 0, 360 * Math.PI / 180, false );
oGc.closePath(); var radial2 = oGc.createRadialGradient( 280, 50, 10, 320, 100, 100 );
radial2.addColorStop( 0.1, 'white' );
radial2.addColorStop( 0.6, 'orange' );
radial2.addColorStop( 1, 'rgba( 255, 0, 0, 0.5 )' );
oGc.fillStyle = radial2;
oGc.fill(); oGc.beginPath();
oGc.lineWidth = 1;
oGc.strokeStyle = '#eee';
for( var i = 0; i < width; i += 10 ){
oGc.moveTo( i, 0 );
oGc.lineTo( i, height );
}
for( var j = 0; j < height; j += 10 ){
oGc.moveTo( 0, j );
oGc.lineTo( width, j );
}
oGc.closePath();
oGc.stroke(); oGc.beginPath();
oGc.fillStyle = 'red';
oGc.strokeStyle = 'blue';
oGc.moveTo( 150, 0 );
oGc.lineTo( 150, height ); oGc.moveTo( 0, 50 );
oGc.lineTo( width, 50 );
oGc.fillText( '(150,50)', 170, 30 );
oGc.stroke();
oGc.closePath(); oGc.beginPath();
oGc.strokeStyle = 'yellow';
oGc.fillStyle = 'black';
oGc.moveTo( 100, 0 );
oGc.lineTo( 100, height );
oGc.moveTo( 0, 100 );
oGc.lineTo( width, 100 );
oGc.fillText( '(100,100)', 30, 120 );
oGc.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="400"></canvas>
</body>
我在图中做出了第一个径向渐变的圆心坐标，便于观看
同心圆渐变:
<head>
<meta charset='utf-8' />
<style>
#canvas{
border:1px dashed #aaa;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ),
width = oCanvas.width, height = oCanvas.height; var radial = oGc.createRadialGradient( 100, 100, 0, 100, 100, 100 );
radial.addColorStop( 0, 'red' );
radial.addColorStop( 0.25, 'orange' );
radial.addColorStop( 0.5, 'yellow' );
radial.addColorStop( 0.75, 'green' );
radial.addColorStop( 1, '#09f' );
oGc.fillStyle = radial;
oGc.fillRect( 10, 10, 200, 200 );
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="400"></canvas>
</body>
三、阴影设置
跟css3的边框阴影用法差不多.
cxt.shadowOffsetX: 水平阴影，可以设置正负数, 正数->向右偏移，负数->向左偏移
cxt.shadowOffsetY: 垂直阴影，可以设置正负数，正数->向下偏移，负数->向上偏移
cxt.shadowColor: 阴影的颜色
cxt.shadowBlur: 阴影的模糊范围
<head>
<meta charset='utf-8' />
<style>
#canvas{
border:1px dashed #aaa;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ),
width = oCanvas.width, height = oCanvas.height; oGc.shadowOffsetX = 5;
oGc.shadowOffsetY = 5;
oGc.shadowColor = '#09f';
oGc.shadowBlur = 10;
oGc.fillStyle = 'red';
oGc.fillRect( 10, 10, 100, 100 ); oGc.shadowOffsetX = -5;
oGc.shadowOffsetY = -5;
oGc.shadowColor = '#09f';
oGc.shadowBlur = 10;
oGc.fillStyle = 'red';
oGc.fillRect( 140, 20, 100, 100 );
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="400"></canvas>
</body>
给文字设置阴影：
<head>
<meta charset='utf-8' />
<style>
#canvas{
border:1px dashed #aaa;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ),
width = oCanvas.width, height = oCanvas.height; oGc.shadowOffsetX = 2;
oGc.shadowOffsetY = 2;
oGc.shadowColor = '#09f';
oGc.shadowBlur = 1;
oGc.font = '30px bold 微软雅黑';
oGc.fillText( '跟着ghostwu学习html5 canvas', 20, 100 );
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="400"></canvas>
</body>
给图片设置阴影
<head>
<meta charset='utf-8' />
<style>
#canvas{
border:1px dashed #aaa;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ),
width = oCanvas.width, height = oCanvas.height; var oImg = new Image();
oImg.src = './img/mv.jpg'; oImg.onload = function(){
oGc.shadowOffsetX = 5;
oGc.shadowOffsetY = 5;
// oGc.shadowOffsetX = 0;
// oGc.shadowOffsetY = 0;
oGc.shadowColor = '#888';
oGc.shadowBlur = 20;
oGc.fillRect( 50, 20, 200, 200 );
oGc.drawImage( oImg, 50, 20 );
}
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="400"></canvas>
</body>
给图片的四周设置阴影：
把shadowOffsetX和shadowOffsetY都设置为0，那么就会在四周产生阴影效果
<head>
<meta charset='utf-8' />
<style>
#canvas{
border:1px dashed #aaa;
}
</style>
<script>
window.onload = function(){
var oCanvas = document.querySelector( "#canvas" ),
oGc = oCanvas.getContext( '2d' ),
width = oCanvas.width, height = oCanvas.height; var oImg = new Image();
oImg.src = './img/mv.jpg'; oImg.onload = function(){
oGc.shadowOffsetX = 0;
oGc.shadowOffsetY = 0;
oGc.shadowColor = '#888';
oGc.shadowBlur = 20;
oGc.fillRect( 50, 20, 200, 200 );
oGc.drawImage( oImg, 50, 20 );
}
}
</script>
</head>
<body>
<canvas id="canvas" width="500" height="400"></canvas>
</body>
[js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置的更多相关文章
- [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...
- [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)
之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...
- [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)
绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...
- [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)
接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...
- [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)
接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...
- [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)
上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...
- [js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)
接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现 ...
- [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)
本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...
- [js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法
canvas是html5中引入的一个新元素,俗称画布,既然是画布,当然是用来画图的.canvas技术指的是利用javascript操作canvas元素绘制图形的技术,要使用canvas,一定要浏览器支 ...
随机推荐
- HTML <area><map>标签及在实际开发中的应用
之前,我一直以为HTML <area>是一个鸡肋HTML,估计到了HTML5时代会被废弃的命.但是,最近一查资料,乖乖了个咚,不仅没被废弃,反而发展了,新增了一些标签属性,例如rel,me ...
- Swift4.0 Array详解
数组的介绍 数组(Array)是一串有序的由相同类型元素构成的集合,数组中的集合元素是有序的,可以重复出现.在Swift中数组类型是Array,是一个泛型集合.数组分成:可变数组和不可变数组,分别使用 ...
- WebForm页面间传值方法（转）
Asp.NET WEB FORMS 给开发者提供了极好的事件驱动开发模式.Asp .NET为我们提供了三种方式,一种是可以通过用QueryString来传送相应的值,再一种是通过session变量来传 ...
- Project 6:上楼梯问题
问题简述:梯有N阶,上楼可以一步上一阶,也可以一步上二阶.编写一个程序,计算共有多少中不同的走法. 样例输入: 5 样例输出: 8 #include <stdio.h> int count ...
- POJ 3463 最（次）短路条数
Sightseeing Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 9497 Accepted: 3340 Descr ...
- datable 翻页事件处理
JQuery datatable插件,点下一页在点击事件无效问题 (2013-10-16 16:01:54) 转载▼ 分类: C# 在MVC的项目中,我利用jquery datatable 来实现 ...
- 转：【Java并发编程】之十五：并发编程中实现内存可见的两种方法比较：加锁和volatile变量
转载请注明出处:http://blog.csdn.net/ns_code/article/details/17290021 在http://blog.csdn.net/ns_code/article/ ...
- 201521123084 《Java程序设计》第12周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. (1)Java中把不同类型的输入.输出抽象为流(Stream),而其中输入.输出的数据则称为数据流(Data ...
- 【1414软工助教】团队作业6——展示博客（Alpha版本） 得分榜
题目 团队作业6--展示博客(Alpha版本) 作业提交情况情况 为所欲为 团队没有提交,其余都按时提交. 往期成绩 个人作业1:四则运算控制台 结对项目1:GUI 个人作业2:案例分析 结对项目2: ...
- 201521123036 《Java程序设计》第8周学习总结
本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 HashMap自定义排序 List<Map.Entry<Stri ...