绘制文字
<!DOCTYPE HTML><HTML lang="en"head> Meta charset="UTF-8"Title>canvas</style> .canvas{border:1px solID pink;} bodycanvas class="canvas" ID wIDth="600" height="400">您的浏览器不支持canvascanvas> script> var canvas=document.getElementByID("canvas); ctxcanvas.getContext(2d);//上下文，绘图环境 strhello cyy; 文字大小 ctx.Font50px sans-serif字符str 位置100,100 ctx.fillText(str,100,1)">); ctx.strokeText(str,1)">200); HTML>
水平对齐方式：left center right
文字居中，textAlign="center"
文字水平居中 ctx.textAligncenter字符str 位置100,1)">>
需要注意的是，设置的并不是到画布的水平居中，而是以接下来你自己设置的fillText或者strokeText中的坐标作为文字的中心
如果想要设置到画布的居中，就需要对应的坐标点设为画布中心点
字符str 在画布位置水平居中300>
垂直对齐方式 top mIDdle bottom
文字水平居中，以300位为水平中心文字垂直居中 ，以0为垂直中心 ctx.textBaselinemIDdle字符str 0>
如果需要文字全部显示，就设置垂直为top
文字垂直居中 ，以0为垂直顶对齐top>
获取文本宽度
获取文本宽度 wIDthctx.measureText(str).wIDth; console.log(wIDth); >
遗憾的是，canvas并没有提供获取高度的接口，因此需要通过文字大小或者自己去调试来获得
图片的绘制
加载图片 imgnew Image(); img.srcimg/right.png; 绘制图片 ctx.drawImage(img,1)">>
打开以后发现并没有图片，这是因为图片的加载需要一定时间
因此绘制必须要在图片加载完成之后才能进行
使用onload函数来判定是否加载完成
图片加载完成后 img.onloadfunction(){ ctx.drawImage(img,1)">); } >
给自己做一个头像，我又臭美了哈哈哈
1px solID #abcdefbackground-color #a9add2="600"img/cyy_small.png50>
设置图像尺寸
ctx.drawImage(img,100,50,wIDth,height);
后面新增两个参数填写图片的宽高
绘制图片 原图400,*600，缩放为200*300>
图片的裁剪，需要
ctx.drawImage(img，要裁剪的起始点坐标，要裁剪的宽高尺寸，绘制区域的起始点坐标，绘制区域的宽高尺寸);
裁剪出原图的0,0到400,400位置 绘制到0,1)">等于是不进行缩放的效果400>
@H_154_404@
裁剪+缩放0.5倍+移动100,100的效果
(){//绘制图片@H_975_419@ //从原图的0,0开始裁剪，宽高400,300@H_975_419@ //从100,100开始绘制，宽高为200,150
ctx.drawImage(img,0,400,300,100,200,150);
} >
图形画刷
首先是star.jpg长这样
img/star.jpg创建图形画刷，模式为repeat patternctx.createPattern(img,1)">repeat); ctx.fillStylepattern; 绘制矩形，使用画刷填充 ctx.fillRect(>
模式总共有四种：no-repeat repeat-x repeat-y repeat
no-repeat的效果
no-repeat>
其他两个同理
总结
以上是内存溢出为你收集整理的canvas中文字和图片的绘制全部内容，希望文章能够帮你解决canvas中文字和图片的绘制所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）