HTML之canvas 8 绘制阴影-绘制文字
Posted 李大白
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于HTML之canvas 8 绘制阴影-绘制文字的主要内容，如果未能解决你的问题，请参考以下文章