返回上一页
客服QQ
客服QQ
一切从沟通开始……
跟KingDZ学HTML5之六：Canvas特效-阴影和渐变
作者：睿美印象网站建设工作室 发布日期：2012-11-22
我们首先看一下，如何实现一个阴影效果，呵呵，看效果吧
好了 ，先给大家展示一下代码，在说明一下。
XML/HTML Code复制内容到剪贴板
<! doctype html>
<html>
<head>
<script type="text/javascript">
function draw() {
var c = document.getElementById("mycanvas");
var ccxt = c.getContext("2d");
cxt.shadowOffsetX = 5;
cxt.shadowOffsetY = 5;
cxt.shadowBlur = 4;
cxt.shadowColor = "rgba(255,0,0,0.5)";
cxt.fillStyle = "orange";
cxt.arc(50, 50, 50, 0, Math.PI * 2, true);
cxt.fill();
}
</script>
</head>
<body>
<canvas id="mycanvas" width="200" height="200">不支持此标签 KingDZ原创 http://www.cnblogs.com/hihell</canvas>
<input type="button" value="画图" onclick="draw();" />
<body>
</html>
上面的结果注意点
shadowColor：阴影颜色。其值和 CSS 颜色值一致。 【之前的课程我已经说明过了】
shadowBlur：设置阴影模糊程度。此值越大，阴影越模糊。
shadowOffsetX 和 shadowOffsetY：阴影的 x 和 y 偏移量，单位是像素。
颜色渐变
颜色渐变的几个重要属性。
createLinearGradient 和 createRadialGradient。
前者创建线性颜色渐变，后者创建圆形颜色渐变。创建颜色渐变对象后，可以使用对象的 addColorStop 方法添加颜色中间值。
好了，还是用例子说明吧。
JavaScript Code复制内容到剪贴板
createLinearGradient(x1,y1,x2,y2) //(x1,y1)渐变的起点 (x2,y2)渐变的终点
createRadialGradient(x1,y1,r1,x2,y2,r2) // 前面是一个 原点为 (x1,y1) 半径为 r1的点，后面的那个是以(x2,y2) 为原点，r2为半径的点。
addColorStop(position, color)//这个方法的第一个参数，就是位置，取值范围 0---1.0 color 则必须是一个 CSS 颜色值
下面我们实现一个线性渐变
JavaScript Code复制内容到剪贴板
function draw() {
var c = document.getElementById("mycanvas");
var cxt = c.getContext("2d");
var lineargradient = cxt.createLinearGradient(0, 0, 200, 0);
lineargradient.addColorStop(0, red);
lineargradient.addColorStop(1, white);
cxt.fillStyle = lineargradient;
cxt.fillRect(0, 0, 200, 200);
}
好了，一个简单的渐变就做好了。
JavaScript Code复制内容到剪贴板
function draw() {
var c = document.getElementById("mycanvas");
var cxt = c.getContext("2d");
var rad = cxt.createRadialGradient(70, 70, 70, 40, 40, 10);
rad.addColorStop(0, "#fff");
rad.addColorStop(0.7, "#333")
rad.addColorStop(1, "#000");
cxt.fillStyle = rad;
cxt.fillRect(0, 0, 200, 200);
}
转载请注明：睿美印象网站建设工作室www.ruimeiyx.com
好了 ，先给大家展示一下代码，在说明一下。
XML/HTML Code复制内容到剪贴板
<! doctype html>
<html>
<head>
<script type="text/javascript">
function draw() {
var c = document.getElementById("mycanvas");
var ccxt = c.getContext("2d");
cxt.shadowOffsetX = 5;
cxt.shadowOffsetY = 5;
cxt.shadowBlur = 4;
cxt.shadowColor = "rgba(255,0,0,0.5)";
cxt.fillStyle = "orange";
cxt.arc(50, 50, 50, 0, Math.PI * 2, true);
cxt.fill();
}
</script>
</head>
<body>
<canvas id="mycanvas" width="200" height="200">不支持此标签 KingDZ原创 http://www.cnblogs.com/hihell</canvas>
<input type="button" value="画图" onclick="draw();" />
<body>
</html>
上面的结果注意点
shadowColor：阴影颜色。其值和 CSS 颜色值一致。 【之前的课程我已经说明过了】
shadowBlur：设置阴影模糊程度。此值越大，阴影越模糊。
shadowOffsetX 和 shadowOffsetY：阴影的 x 和 y 偏移量，单位是像素。
颜色渐变
颜色渐变的几个重要属性。
createLinearGradient 和 createRadialGradient。
前者创建线性颜色渐变，后者创建圆形颜色渐变。创建颜色渐变对象后，可以使用对象的 addColorStop 方法添加颜色中间值。
好了，还是用例子说明吧。
JavaScript Code复制内容到剪贴板
createLinearGradient(x1,y1,x2,y2) //(x1,y1)渐变的起点 (x2,y2)渐变的终点
createRadialGradient(x1,y1,r1,x2,y2,r2) // 前面是一个 原点为 (x1,y1) 半径为 r1的点，后面的那个是以(x2,y2) 为原点，r2为半径的点。
addColorStop(position, color)//这个方法的第一个参数，就是位置，取值范围 0---1.0 color 则必须是一个 CSS 颜色值
下面我们实现一个线性渐变
JavaScript Code复制内容到剪贴板
function draw() {
var c = document.getElementById("mycanvas");
var cxt = c.getContext("2d");
var lineargradient = cxt.createLinearGradient(0, 0, 200, 0);
lineargradient.addColorStop(0, red);
lineargradient.addColorStop(1, white);
cxt.fillStyle = lineargradient;
cxt.fillRect(0, 0, 200, 200);
}
好了，一个简单的渐变就做好了。
JavaScript Code复制内容到剪贴板
function draw() {
var c = document.getElementById("mycanvas");
var cxt = c.getContext("2d");
var rad = cxt.createRadialGradient(70, 70, 70, 40, 40, 10);
rad.addColorStop(0, "#fff");
rad.addColorStop(0.7, "#333")
rad.addColorStop(1, "#000");
cxt.fillStyle = rad;
cxt.fillRect(0, 0, 200, 200);
}
转载请注明：睿美印象网站建设工作室www.ruimeiyx.com
已有 0 条评论
暂无评论
- 仿AS语法来写HTML5—第5章，Graphics绘图
- css中的单位介绍
- 跟KingDZ学HTML5之七：Canvas移动、旋转、缩放
- HTML5版3D实验室一：3D游戏与动画编程核心
- 表格的规范和优先级
- 一步一步学做游戏 第五回：熊碰撞蘑菇处理
- 30个基于CSS的导航和按钮优秀设计教程
- html5特性检测代码
- 跟KingDZ学HTML5系列：文章索引，未完待续
- HTML5移动应用开发第2章：移动web应用的本地存储
- 2、【视频】为什么页面四周有一个白边，内容不能贴边显示
- 第十天 div+css网页标准布局实例教程（一）
- 去掉焦点虚线
- 《精通HTML5编程》第一章：内容概述
- HTML5架构（HTML5 Boilerplates ）
- css初学者：定义css伪类的三种方式
版权所有：睿美印象网络网站建设工作室 2010-2012 服务热线：15636322282（网站建设工作室）
