canvas简单画布变换，创建阴影

最新推荐文章于 2024-04-12 10:30:40 发布

冷风**

最新推荐文章于 2024-04-12 10:30:40 发布

阅读量193

点赞数

分类专栏： canvas 文章标签： html5

本文链接：https://blog.youkuaiyun.com/ypuzhiyuan/article/details/105817590

版权

canvas 专栏收录该内容

1 篇文章

订阅专栏

本文介绍HTML5 Canvas如何实现图形的阴影效果和变换操作，包括设置阴影属性、平移、旋转和缩放等技巧，帮助开发者创建更丰富的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function drawScreen() {
		
  
	
	context.setTransform(1,0,0,1,0,0);
	var angleINRadian=45*Math.PI/180;
	
	var x=100;var y=100;var width=50;var height=50;
	context.translate(x+.5*width,y+.5*height);
	context.scale(3,3);
	context.rotate(angleINRadian);
	context.fillStyle='cornflowerblue'
	context.fillRect(-.5*width,-.5*height,width,height);
	}

在这里插入图片描述

  context.fillStyle="cornflowerblue";
	context.shadowOffsetX=0;
    context.shadowOffsetY=0;
   context.shadowColor="black";
   context.shadowBlur=20;
   context.arc(250,250,100,(Math.PI/180)*0,(Math.PI/180)*360,false);
    context.fill();