你的位置:首页 > 网页设计

[网页设计]html5 canvas创建阴影


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>创建阴影</title><script src="js/modernizr.js"></script></head><body><script type="text/javascript">window.addEventListener('load',eventWindowLoaded,false);function eventWindowLoaded(){  canvasApp();}function canvasSupport(){  return Modernizr.canvas;}function canvasApp(){  if(!canvasSupport()){    return;  }else{    var theCanvas = document.getElementById('canvas')    var context = theCanvas.getContext("2d")  }  drawScreen();  function drawScreen(){    context.fillStyle = '#ff0000';    context.shadowOffsetX=4;    context.shadowOffsetY=4;    context.shadowColor='#000';    context.shadowBlur='4';    context.fillRect(10,10,100,100);        //正值为底部和右侧创建阴影  看上面那段            //负值为左侧和上面创建阴影  看下面那段        context.shadowOffsetX=-4;    context.shadowOffsetY=-4;    context.shadowColor='#000';    context.shadowBlur='4';    context.fillRect(150,10,100,100);            //难道你认为他只能给方的加吗,错了啦,下面那个圆也可以,连贝塞尔曲线也可以(玩惯PS工具了,习惯叫钢笔路径了)    context.shadowOffsetX=10;    context.shadowOffsetY=10;    context.shadowColor='rgb(100,100,100)';    context.shadowBlur='8';    context.arc(200,300,100,(Math.PI/180)*0,(Math.PI/180)*360,false);    context.fill();   }  }</script><canvas id="canvas" width="500" height="500">你的浏览器无法使用canvas如有疑问加QQ:1035417613;小白童鞋;你的支持是我最大的快乐!!</canvas></body></html>

shadowOffsetX,shadowOffsetY,控制阴影的位置

shadowBlur控制阴影的模糊程度

shadowColor控制阴影的颜色

类似css3的这个属性box-shadow