做网站知识

使用HTML5的画布特性创建图形的阴影

新闻资讯 发布时间2014.3.27.浏览数:1499

【使用HTML5创建图形的阴影】 var canvas = document.getElementById('shadowcanvas');var ctx = canvas.getContext('2d');ctx.save();ctx.fillStyle = '#EB852A';ctx.shadowOffset......营销型网站建设www.scpy.net三行网络公司为您详细介绍 - 请往下阅读》

使用HTML5创建图形的阴影

使用HTML5创建图形的阴影

var canvas = document.getElementById('shadowcanvas');

var ctx = canvas.getContext('2d');

ctx.save();

ctx.fillStyle = '#EB852A';

ctx.shadowOffsetX = 15; // 阴影Y轴偏移

ctx.shadowOffsetY = 15; // 阴影X轴偏移

ctx.shadowBlur = 14; // 模糊尺寸

ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; // 颜色

ctx.beginPath();   ctx.arc(150, 150, 75, 0, 2 * Math.PI, false);

ctx.fill();  ctx.restore();   ctx.fillStyle = '#222222';

ctx.beginPath();   ctx.arc(350, 150, 75, 0, 2 * Math.PI, false);   ctx.fill();



这段代码中,我们首先得到画布并取得context,调用方法添加阴影相关属性,包括了偏移,模糊和阴影颜色。最后调用canvas方法生成图形,这里我们为了更好的对比效果,分别生成了2个圆形,一个包含阴影,一个不包含阴影。需注意以上阴影属性,至少得设置颜色和模糊度。
三行网络_营销型网站建设公司 ——网页细节精细制作!秉承以高品质网页设计,丰富的网站制作经验和高超创意的建网站水平,根据您的企业的行业类型和产品特点设计出更加商业化,以优秀的视觉效果为您量身打造经典的企业网站形象,为广大商业客户搭起“双赢之桥”。
《使用HTML5的画布特性创建图形的阴影》此文由三行网络公司原创,转载请保留原文链接,谢谢!

【关键词标签】使用HTML5创建图形的阴影    (PC+手机)响应式网站建设

15989229398(微信咨询)

专业做网站 · ¥明码实价!


匠心打造精品,用心成就经典!携手客户共创双赢!
© Copyright 广州三行网络科技有限公司
粤ICP备案号:09210325