canvas绘制文本和清除绘制

绘制文本

绘制文本的方法有两种：fillText和strokeText

fillText()有五个参数，第一个参数为绘制内容(字符串)，第二个参数为起点x轴坐标，第三个参数为起点y轴坐标后两个参数可选，为最大宽度和最大高度。

strokeText类似,但是它无填充，简单来说就是文字不能被修改颜色。

文本颜色使用fillStyle属性指定

文本字体使用font属性指定：font:"字体大小字体样式"，两个值缺一不可。

textAlign属性指定水平方向对齐方式；

属性值有：start、left、center、right、end

textBaseline则指定垂直方向。

属性值有：top、hanging、middle 、alphabetic、ideographic、bottom

学会绘制文本后，我们完善一下昨天写的柱状图。

 <style>#cav{border: 1px solid black;}</style>
</head>
<body><canvas id="cav" width="500" height="400"></canvas><script>var cav =document.querySelector("#cav")var ctx= cav.getContext("2d")ctx.moveTo(50,350)ctx.lineTo(450,350)ctx.stroke()//假数据arr=[500,600,800,700,500,800]arr1=["一季度","二季度","三季度","四季度","最低季度","最高季度",]//设置最大高度var maxh=300/Math.max(...arr)for (let i = 0; i < arr.length; i++) {ctx.beginPath()ctx.font="14px weiruanyahei"ctx.fillStyle="purple"ctx.rect(80+i*60,350-maxh*arr[i],50,maxh*arr[i])ctx.fillText(arr1[i],85+i*60,370)ctx.fillText(arr[i],90+i*60,350-maxh*arr[i]-10)ctx.fill()}</script>

效果：

清除绘制

clearRect() 方法清空给定矩形内的指定像素

有四个参数：

第一个参数为矩形的左上角顶点的x轴坐标；

第二个参数为矩形的左上角顶点的y轴坐标；

第三个参数为矩形的宽度；

第四个参数为矩形的高度。

代码演示一下：

    <canvas id="cav" width="400" height="400"></canvas><script>var cav=document.querySelector("#cav")var cxt=cav.getContext("2d")//设置填充色cxt.fillStyle="pink"//创建一个填充颜色的矩形cxt.fillRect(100,100,100,200)//清除一半cxt.clearRect(100,100,100,100)

运行代码后可以看到创建的矩形被清除了一半

除了这里的清除绘制外，window对象还为我们提供了一个方法清除绘制。就是重设画布width，canvas.width=canvas.width，这样同样也能够清除前面的绘制。

canvas绘制文本和清除绘制相关推荐

drawRect的绘制的使用（绘制文本字符、绘制图片、绘制图形）
通过重写UIView的drawRect方法进行绘制使用,如绘制文本字符.绘制图片.绘制图形等. 在iOS中使用drawRect绘图一般分为以下5个步骤: 1.获取绘图上下文 CGContextRef ...
html语言填充没有只有描边,HTML5 Canvas笔记——交互绘制文本（描边、填充、阴影、渐变填充、图案填充、文本的属性设置）...
(1)文本的描边.填充.阴影 (2)文本的渐变填充 (3)文本的图案填充 (4)文本的属性设置及效果呈现交互绘制文本.html 交互绘制文本 body { background: #eeeeee; ...
html5 canvas画文本框,HTML5 canvas绘制文本
HTML5的canvas也提供渲染文本的方法. (1)绘制文本方法:fillText和strokeText fillText(text,x,y[,maxWidth]) 在指定的(x,y)位置填充指定的 ...
HTML5之Canvas 2D入门1 - Canvas绘制文本和图像
Canvas历史 canvas是一个新的HTML元素,这个元素可以被脚本语言(通常是JavaScript)用来绘制图形.例如可以用它来画图.合成图象.或做动画.canvas最先在苹果公司(Apple) ...
html像素绘制文字,HTML5 - Canvas的使用样例10（绘制文本）
1,设置绘图上下文的font属性 (1)设置字体大小(像素)和字体名称 context.font = "22px Arial"; (2)为了适应多个浏览器,字体名字可以多列几种 c ...
html绘图环境,HTML_HTML5 在canvas中绘制文本附效果图，一、绘制文本在绘图环境中提 - phpStudy...
HTML5 在canvas中绘制文本附效果图一.绘制文本在绘图环境中提供了两种方法在canvas中绘制文本. strokeText(text,x,y) : 在(x,y)处绘制空心的文本. fill ...
精通Android自定义View(八)绘制篇Canvas分析之绘制文本
1 简述绘制文字分为三种应用场景: 情况1:指定文本开始的位置即指定文本基线位置基线x默认在字符串左侧,基线y默认在字符串下方情况2:指定每个文字的位置情况3:指定路径,并根据路径绘制文字 ...
HTML5 Canvas中绘制文本
绘制文本画布中不仅可以绘制图形,还可以绘制文本.绘制文本,既可以使用填充方法,也可以使用勾勒方法: fillText(text, x, y, [maxWidth]) strokeText(text, ...
canvas绘制文本文本的
在canvas中绘制文本 canvas 提供了两种方法来渲染文本: fillText(text, x, y) 在指定的(x,y)位置填充指定的文本 <!DOCTYPE html> ...

canvas绘制文本和清除绘制

canvas绘制文本和清除绘制相关推荐

最新文章

热门文章