HTML5 利用canvas API 展示阴影效果

HTML5的Canvas自带API可以显示阴影效果，主要还是在画布(canvas)的上下文对象(context)上做文章

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>HTML5 Combine Shape DEMO</title>
<script type="text/javascript" src="js/drawShadow.js"></script>
</head>
<body onload="draw('canvas')"></body>
<h2>canvas：显示阴影效果</h2>
<canvas id="canvas" width="400” height="400"/>
<br><br>

画带阴影效果的图形见如下的js代码：

/**
* This file is confidential by Charles.Wang
* Copyright belongs to Charles.wang
* You can make contact with Charles.Wang (charles_wang888@126.com)
*/
function draw (id){
//取得画布对象
var canvas = document.getElementById(id);
if(canvas ==null)
return false;
//取得上下文
var context = canvas.getContext('2d');
//绘制底图
context.fillStyle='#FFEEFF';
context.fillRect(0,0,400,400);
//以下4个属性是阴影的设置属性，用他们可以用来画阴影效果
//shadowOffSetX是横向位移量，所以这里设置为10表明阴影会出现在原图形右边，最多10像素
context.shadowOffSetX=10;
//shadowOffSetX是纵向位移量，所以这里设置为10表明阴影会出现在原图形下边，最多10像素
context.shadowOffsetY=10;
//阴影的颜色
context.shadowColor="rgba(50,50,100,0.5)";
//阴影的模糊范围
context.shadowBlur=7.5;
//所以到这里为止，我们吧上下文关联上了阴影效果，所有用这个context绘制的图形都会有（+10，+10）的阴影效果
//绘制五角星
context.translate(50,50);
create5star(context);
context.fill();
}
function create5star(context){
var n = 0;
var dx=100;
var dy=0;
var s = 50;
//创建路径
context.beginPath();
context.fillStyle='rgba(255,0,0,0.5)';
var x = Math.sin(0);
var y=Math.cos(0);
var dig = Math.PI/5*4;
//画5条边
for(var i =0;i<5;i++){
var x = Math.sin(i * dig);
var y = Math.cos(i* dig);
context.lineTo(dx+x*s,dy+y*s);
}
context.closePath();
}

最终展示效果如图：

转载于:https://blog.51cto.com/supercharles888/854126

HTML5 利用canvas API 展示阴影效果相关推荐

在html利用canvas蚂蚁,html5 利用canvas实现简单的人物走动
最近在学习html5,其中涉及到很关键的元素canvas-画布,在网上下载了一些游戏源代码,虽然能看懂,但是想单独地针对某个功能提取出来还是有难处的,于是乎自己又上网查找了一些例子,才将超级玛丽简单的 ...
html5 自动扣图,html5利用canvas实现颜色容差抠图功能
利用canvas的getImageData,我们可以获取到一张图片每一个像素的信息,而通过对每一个像素信息的对比,我们就可以找到需要消去的像素点.比如下面这一张图片,如果我们想要扣去白色部分(粉色是b ...
php图片素描化,html5利用canvas实现图片转素描效果
本章给大家介绍html5如何利用canvas实现图片转素描效果.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 素描滤镜原理: 最基础的算法就是: 1.去色:(去色公式:gray = ...
如何用手机HTML制作哆啦a梦,HTML5利用canvas绘制哆啦A梦头部-电脑自学网
html5的canvas是很强大的,下面本篇文章使用html5 canvas 实现一个简单的哆啦A梦头部.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 效果如下: 代码如下: 您的 ...
HTML5(五)——Canvas API
什么是 Canvas API? Canvas API(画布)提供了一个通过 javascript 和 html 的 canvas 元素来在网页上实时绘制图形的方式.可用于动画.游戏.图标.图片编辑等多 ...
javascript 和HTML5 利用canvas构建猜牌游戏（让我猜猜你心中的牌）【图文说明】...
让我猜猜你心中的牌,先随机生成27张牌,不能重复列出三列牌,然后记住其中一张,然后点击牌所在的列,多次就可以猜出你想的牌. 如果是9张只要猜2次,如果是27张就是猜3次. 实现方法(27张): 如果 ...
html5 判断获取定位,HTML5利用Geolocation API获取地理位置定位功能
如何使用html5地理位置定位功能定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确.首先我们要检测用 ...
如何用php制作超级玛丽,html5 利用canvas实现超级玛丽简单动画
最近在学习html5,其中涉及到很关键的元素canvas-画布,在网上下载了一些游戏源代码,虽然能看懂,但是想单独地针对某个功能提取出来还是有难处的,于是乎自己又上网查找了一些例子,才将超级玛丽简单的 ...
HTML5利用Canvas绘制图形(绘制渐变、模式、变换)
绘制渐变渐变是一种很普遍的视觉形象,能带来视觉上的舒适感.在Canvas中,绘图API提供了两个原生的渐变方法,包括线性渐变和径向渐变.渐变,在颜色集上使用逐步抽样的算法,可以应用的描边样式和填充样 ...

HTML5 利用canvas API 展示阴影效果

HTML5 利用canvas API 展示阴影效果相关推荐

最新文章

热门文章