HTML5+CSS3-充实计划0610

是 否 +2 论坛币

k人 参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

4.5图形组合
绘制阴影：需要多个属性配合完成shadowBlur/shadowOffsetX/shadowOffsetY/

    var c = document.getElementById("myCanvas");
     var ctx = c.getContext("2d");
     ctx.save();    // save context object保存上下文对象
     ctx.shadowBlur = 10;             //设置阴影模糊级数
     ctx.shadowOffsetX=20;         //设置阴影与矩形的水平距离
     ctx.shadowOffsetY=20;         //设置阴影与矩形的垂直距离
     ctx.shadowColor = "red";       //设置阴影的颜色
     ctx.fillSytle="Yellow";                   //设置填充的颜色
     ctx.beginPath();                             //开始绘制图形
     ctx.fillRect(20,20,200,200);       //绘制一个矩形
     ctx.restore();                              //获取保存的上下文对象
     ctx.filleStyle="red";           //重新设置填充颜色
     ctx.beginPath();                      //开始一个新的绘制路径
     ctx.fillRect(300,20,200,200);       //绘制第二个矩形

透明效果：主要通过设置globalAlpha属性来控制重叠图形的透明度（值介于0和1之间）0完全透明，1完全不透明

var c = document.getElementById("myCanvas");
     var ctx = c.getContext("2d");
     ctx.fillStyle="red";                  //设置填充色
     ctx.fillRect(20,20,300,200);      //绘制不透明矩形框
     ctx.globalAlpha=0.2;   //设置透明度
     ctx.fillStyle="blue";           //设置填充颜色
     ctx.fillRect(100,100,300,200);           //第二个矩形
     ctx.fillStyle="green";
     ctx.fillRect(150,150,200,200);           //第三个矩形

扫码加我 拉你入群

请注明：姓名-公司-职位

以便审核进群资格，未注明则拒绝

分享0 收藏0 回帖

关键词：HTML5 HTML htm Document Context

[em17]

为您点赞！

为学习笔记点赞！