星空网 > 软件开发 > 网页设计

html5 之 canvas 相关知识(三)API

strokeStyle定义和用法

strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。

context.strokeStyle=color|gradient|pattern;//指示绘图填充色的CSS颜色值|用于填充绘图的渐变对象线性或放射性|用于填充绘图的 pattern 对象

实例 1 绘制一个矩形。使用渐变笔触:

<canvas id="canvas" width=300 height=150></canvas><script>var c=document.getElementById("canvas");var ctx=c.getContext("2d");var gradient=ctx.createLinearGradient(100,0,200,0);gradient.addColorStop("0","magenta");gradient.addColorStop("0.5","blue");gradient.addColorStop("1.0","red");// 用渐变进行填充ctx.strokeStyle=gradient;ctx.lineWidth=10;ctx.strokeRect(100,25,100,100);  </script>

html5 之 canvas 相关知识(三)API

定义的矩形尺寸100*100,边框宽度为10,实际画出的尺寸是110*110,即总宽= 宽度+边框宽,而非平常盒模型理解的  总宽= 宽度+边框宽*2

实例 2 用一个渐变笔触来写文本 "canvas example"

<canvas id="canvas" width=300 height=150></canvas><script>  var c=document.getElementById("canvas");  var ctx=c.getContext("2d");  ctx.font="30px arial";  var gradient=ctx.createLinearGradient(0,0,c.width,0);  gradient.addColorStop("0","magenta");  gradient.addColorStop("0.5","blue");  gradient.addColorStop("1.0","red");  // 用渐变进行填充  ctx.strokeStyle=gradient;  ctx.strokeText("canvas example",40,80);</script>

html5 之 canvas 相关知识(三)API

shadowColor、shadowBlur 、shadowOffsetX 、shadowOffsetY

设置阴影的颜色、模糊级别、水平及垂直距离。

context.shadowColor=color;
context.shadowBlur=number;
context.shadowOffsetX=number;
context.shadowOffsetY=number;

实例 1 绘制一个红色矩形红色阴影,模糊级别30

<canvas id="canvas" width=300 height=150></canvas><script>  var myCanvas = document.getElementById("canvas");  var cc = myCanvas.getContext("2d");  cc.fillStyle = "#ff0000";  cc.shadowBlur=30;  cc.shadowColor="#ff0000";  cc.fillRect(100,25,100,100);//四个参数分别对应:x,y,w,h</script>

 html5 之 canvas 相关知识(三)API

在没有定义X\Y的阴影偏移时,四边正向放射

在原来 基础上设置X Y 阴影偏移

<canvas id="canvas" width=300 height=150></canvas><script>  var myCanvas = document.getElementById("canvas");  var cc = myCanvas.getContext("2d");  cc.fillStyle = "#ff0000";  cc.shadowBlur=30;  cc.shadowOffsetX=15;  cc.shadowOffsetY=15;  cc.shadowColor="#ff0000";  cc.fillRect(100,25,100,100);//四个参数分别对应:x,y,w,h</script>

html5 之 canvas 相关知识(三)API

shadowOffsetX=0 指示阴影位于形状的正下方。

shadowOffsetX=20 指示阴影位于形状 left 位置右侧的 20 像素处。

shadowOffsetX=-20 指示阴影位于形状 left 位置左侧的 20 像素处。

shadowOffsetY=0 指示阴影位于形状的正下方。

shadowOffsetY=20 指示阴影位于形状 top 位置下方的 20 像素处。

shadowOffsetY=-20 指示阴影位于形状 top 位置上方的 20 像素处。

 

 




原标题:html5 之 canvas 相关知识(三)API

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

The Label Life:https://www.ikjzd.com/w/2160
FastFox:https://www.ikjzd.com/w/2161
easybuy:https://www.ikjzd.com/w/2162
健康优选:https://www.ikjzd.com/w/2163
Amazon PayCode:https://www.ikjzd.com/w/2164
大仙一键搬图:https://www.ikjzd.com/w/2165
独家丨B站广告位可跳转美团APP B站为电商平台引流再升级 :https://www.kjdsnews.com/a/1836410.html
百崖大峡谷生态旅游景区(探秘中国西南自然风光):https://www.vstour.cn/a/363176.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流