HTML之canvas 8 绘制阴影-绘制文字
绘制阴影
Context.shadowOffetX:阴影横向位移量
Context.shadowOffetY:阴影纵向位移量
Context.shadowColor:阴影颜色
Context.shadowBlur阴影的模糊范围
绘制文字
Context.fillStyle=’#00F’;
Context.font=”bold 30px sans-serif”;
Context.fillText(“hello world”,0,0);
Context.strokeText(“hello world”,0,0);
Var metrics=context.measureText(text);
<html>
<head>
<meta charset="UTF-8">
<title>绘制阴影-绘制文字</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript">
var oCanvas = document.getElementById("canvas");
var context = oCanvas.getContext("2d");
context.fillStyle = "#ededed";
context.fillRect(0, 0, 500, 500);
//径向渐变
context.beginPath(); //开始
var grdCirle = context.createRadialGradient(100, 100, 50, 100, 100, 100);
//(xStart,yStart,radiusStart)起点圆的中心点坐标和半径，（xEnd,yEnd,radiusEnd）终点圆的中心点坐标和半径
grdCirle.addColorStop(0, "#f7f8fa"); //起点
grdCirle.addColorStop(0.5, "red");
grdCirle.addColorStop(1, "#53c5d9"); //终点
context.fillStyle = grdCirle;
context.arc(100, 100, 100, 0, 2 * Math.PI); //画一个圆
context.shadowOffsetX = 2; //阴影往左边偏，横向位移量
context.shadowOffsetY = 4; //阴影往左边偏，纵向位移量
context.shadowColor = "rgba(0,0,0,0.3)"; //阴影颜色
context.shadowBlur = 10; //阴影的模糊范围
context.fill(); //填充
context.closePath(); //关上
//绘制文字
context.fillStyle= "#000"; //文字颜色
context.font = "24px Helvetica, Arial, sans-serif;";//字体
context.fillText("球体",20,30);
</script>
</body>
</html>
