html5 canvas创建阴影
2024-08-24 03:53:23
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="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
最新文章
- css3媒体查询实现网站响应式布局
- Windows Azure Service Bus Topics实现系统松散耦合
- 启动tomcat时 错误: 代理抛出异常 : java.rmi.server.ExportException: Port already in use: 1099的解决办法
- Java基础(41):Java中集合中需要注意的几个要点(关于Collection与Map)
- 指令随笔之:tail、cat、scp、&;、&;&;、;、|、>;、>;>;
- ie8中使用placeholder
- hadoop高可用集群搭建小结
- plsql导入一个目录下全部excel
- 让Emeditor支持markdown编辑博客
- Android 使用AsyncTask 下载图片的例子,学会使用AsyncTask
- HDFS Namenode启动过程
- 解决 win10飞行模式 无限自动开关 无法关闭
- [蓝桥杯]2014蓝桥省赛B组题目及详解
- SpringBoot之文件下载
- Vector使用测试
- Python 离线工作环境搭建
- python使用selenium安装chromedriver的问题
- docker同步时区时间
- js实现响应式瀑布流
- vuex、redux、mobx 对比