首页 > 代码库 > HTML之canvas 8 绘制阴影-绘制文字
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 绘制阴影-绘制文字
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。