html5 canvas创建阴影
<!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
额，写上这一段的时候主要还是不明白，好多点反对是对我的随笔不满还是对我随笔质量的不满。。实际上我更多的把这个博客当成个人动态玩的。。。所以还是比较随意的。。。当然如果觉得写得有问题可以在下方评论写出改进建议。。。我会虚心接受，顺便可以知道自己的不足点。。。
分类:
canvas
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架