本文介绍了canvas 阴影和图形变换的示例代码，分享给大家，具体如下：
一、阴影设置
1、阴影的颜色：值为标准的CSS颜色值，用于设定阴影颜色效果，默认是全透明的黑色
context.shadowColor = color;
2、阴影模糊度：用户设定阴影的模糊程度，其数值不跟像素挂钩，默认为0
context.shadowBlur = 5;3、阴影的偏移：
shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0
context.shadowOffsetX = 10; //正值：往右
context.shadowOffsetY = 10; //正值：往下
4、设置文字阴影的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas{
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="500" height="500"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.font = "bold 50px 微软雅黑";
context.fillStyle="red";
//阴影的颜色
context.shadowColor = "orangered";
//阴影模糊度
context.shadowBlur = 20;
//阴影的偏移
context.shadowOffsetX = 10; //正值：往右
context.shadowOffsetY = 10; //正值：往下
context.fillText("你好",100,100);
</script>
</html>
二、图形变换
我们之前在2D变换中也学习过这些知识，但是我们canvas图形变换有所不同，不同点就是这里的变换并不是变换图形，而是变换坐标系，因此，我们在变换完一个图形之后，坐标系就发生变换了，那么我们如果再直接绘图的话就会出现问题，下面我们来具体是什么情况吧
1、为了验证我们上面的说法，我们来看一个例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas{
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="800" height="800"></canvas>
