canvas绘制边框,canvas填充颜色
演示HTML5画布填充与中风文字效果，基于帆布如何实现纹理填充与描边。一：颜色填充与描边
颜色填充可以通过填充样式来实现，描边颜色可以通过线条来实现。简单示例
如下：复制代码代码如下：
//填充和描边文本
ctx.font= 60pt Calibri
CTX。线宽=3；
ctx.strokeStyle= green
ctx.strokeText(Hello World！, 20, 100);
ctx.fillStyle= red
ctx.fillText(Hello World！, 20, 100);二：纹理填充与描边
HTML5画布还支持纹理填充，通过加载一张纹理图像，然后创建画笔模式，创建纹理模式的应用程序接口为ctx.createPattern(imageTexture， repeat )；第二参数支持四个值，分别为"重复-x "、"重复-y "、"重复"、"不重复"意思是纹理分别沿着X轴，Y轴，XY方向沿重复或者不重复。纹理描边与填充的代码如下：复制代码代码如下：
var木材填充=CTX。创建模式(图像纹理，“重复”)；
CTX。笔画样式=木质填充；
ctx.strokeText(Hello World！, 20, 200);
//填充矩形
CTX。填充样式=木材填充；
CTX . fill rect(60240260440)；
纹理图片：三：运行效果
代码：复制代码代码如下：
！声明文档类型
超文本标记语言
头
meta http-equiv= X-UA-Compatible content= chrome=IE8
meta http-equiv= Content-type Content= text/html；charset=UTF-8
标题画布填充和描边文本演示/标题
link href= default。CSS rel=样式表/
脚本
var ctx=null//全局变量2d上下文
var imageTexture=null
window.onload=function() {
var canvas=文档。getelementbyid( text _ canvas )；
控制台。日志(画布。父节点。客户端宽度)；
画布。宽度=画布。父节点。客户端宽度；
画布。高度=画布。父节点。客户身高；
如果(!canvas.getContext) {
不支持console.log(Canvas .请安装一个HTML5兼容的浏览器。);
返回；
}
//获取画布的2D上下文并绘制矩形
CTX=画布。获取上下文(“2d”)；
ctx.fillStyle= black
ctx.fillRect(0，0，canvas.width，canvas。身高)；
//填充和描边文本
ctx.font= 60pt Calibri
CTX。线宽=3；
ctx.strokeStyle= green
ctx.strokeText(Hello World！, 20, 100);
ctx.fillStyle= red
ctx.fillText(Hello World！, 20, 100);
//按图案填充和描边
图像纹理=文档。createelement(“img”)；
imageTexture.src=./模式。png ；
图像纹理。onload=loaded()；
}
函数已加载(){
//延迟加载图像
setTimeout(textureFill，1000/30)；
}
函数textureFill() {
//var木补=CTX。创建图案(图像纹理，重复-x )；
//var木补=CTX。创建图案(图像纹理，重复-y )；
//var木补=CTX。创建图案(图像纹理，“无重复”)；
var木材填充=CTX。创建模式(图像纹理，“重复”)；
CTX。笔画样式=木质填充；
ctx.strokeText(Hello World！, 20, 200);
//填充矩形
CTX。填充样式=木材填充；
CTX . fill rect(60240260440)；
}
/脚本
/头
身体
h1HTML5画布文本演示-由阴郁的鱼/h1
预填充和描边/预
div id=我的画家
画布id=text_canvas/canvas
/div
/body
/html
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。