canvas如何绘制标签,在知识的海洋狗刨(上)

简介: 下面总结了一些canvas绘制标签的心得体会,希望能够对你有所帮助。

绘制圆弧



<canvas id="canvas" width="300" height="300" ref="canvas"></canvas>


var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(150,150,50,0,Math.PI*1/2);
ctx.stroke();


运行结果:



绘制直线



var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,150);
ctx.stroke();


运行结果:



绘制圆角矩形



通过圆弧与直线相结合,绘制出矩形路径。


var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = 100;
var height = 50;
var radius = 5;
ctx.translate(100, 100);
ctx.beginPath(0);
ctx.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
ctx.lineTo(radius, height);
ctx.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
ctx.lineTo(0, radius);
ctx.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);
ctx.lineTo(width - radius, 0);
ctx.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);
ctx.lineTo(width, height - radius);
ctx.closePath();
// 填充背景色
ctx.fillStyle = "#ff6a61";
ctx.fill();
ctx.restore();


运行结果:



填充文本


...
ctx.font = '16px PingFangSC-Regular';
ctx.textAlign = "center"; 
ctx.textBaseline = 'middle';
ctx.fillStyle = '#fff';
ctx.fillText('快狗打车', 50, 25);


textBaseline 属性设置或返回在绘制文本时的当前文本基线。


运行结果:



宽度自适应



标签宽度设置定值的做法难免有些耍流氓,怎样才能实现标签宽度由文本内容撑起?

canvas为我们提供了ctx.measureText(text).width接口获得文本内容宽度;标签宽度 = 文本内容宽度 + 左右内边距。


先把绘制圆角矩形背景的部分单独抽出来:


function drawRoundRect(ctx, x, y, width, height, radius, bgc) {
  ctx.save();
  ctx.translate(x, y);
  drawRoundRectPath(ctx, width, height, radius);
  ctx.fillStyle = bgc;
  ctx.fill();
  ctx.restore();
}
function drawRoundRectPath(ctx, width, height, radius) {
  ctx.beginPath(0);
  ctx.arc(width - radius, height - radius, radius, 0, Math.PI / 2);
  ctx.lineTo(radius, height);
  ctx.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);
  ctx.lineTo(0, radius);
  ctx.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2);
  ctx.lineTo(width - radius, 0);
  ctx.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2);
  ctx.lineTo(width, height - radius);
  ctx.closePath();
}
};


相关文章
|
8天前
|
移动开发 前端开发 JavaScript
HTML5 Canvas组件绘制太极图案
HTML5 Canvas组件绘制太极图案
8 0
|
30天前
|
前端开发 API
canvas详解03-绘制图像和视频
canvas详解03-绘制图像和视频
51 1
|
11月前
|
定位技术
Echarts实战案例代码(39):地理坐标整体地图背景色渐变效果和字体随地图缩放的解决方案
Echarts实战案例代码(39):地理坐标整体地图背景色渐变效果和字体随地图缩放的解决方案
211 0
|
11月前
|
前端开发 JavaScript
canvas:绘制视频封面
canvas:绘制视频封面
67 0
canvas:绘制视频封面
|
12月前
|
前端开发 JavaScript 容器
前端|利用<canvas>画布制作地球轨道
前端|利用<canvas>画布制作地球轨道
197 0
|
前端开发 JavaScript
教你如何利用canvas画布绘制哆啦A梦
订阅专栏 教你如何利用canvas画布绘制哆啦A梦 最近一直在练习使用canvas画布标签,今天教大家如何使用canvas画布绘制哆啦A梦。如图: HTML代码: <canvas id="my_canvas"></canvas> 1 CSS代码: canvas { display:block; margin:0 auto; background: pink } 1 2 3 4 5 JavaScript代码: var oCanvas = document.getEleme
教你如何利用canvas画布绘制哆啦A梦
|
前端开发 JavaScript
教你如何用Canvas绘制整身的哆啦A梦
教你如何用Canvas绘制整身的哆啦A梦 上牌你文章我们说到了如何使用canvas绘制哆啦A梦,但当时只是绘制了哆啦A梦的头部,之后有学员留言说可不可以教大家绘制整身的哆啦A梦,想了想,决定安排一下。如图: 在这里插入图片描述 HTML代码: &lt;canvas id=&quot;my_canvas&quot;&gt;&lt;/canvas&gt; &lt;canvas id=&quot;my_canvas2&quot;&gt;&lt;/canvas&gt; 1 2 CSS代码: * { margin: 0; } #my_canvas {
教你如何用Canvas绘制整身的哆啦A梦
|
JSON 前端开发 JavaScript
Threejs引入字体,实现3D文字,Canvas画布作为纹理贴图实现滚动字幕
Threejs引入字体,实现3D文字,Canvas画布作为纹理贴图实现滚动字幕
762 0
Threejs引入字体,实现3D文字,Canvas画布作为纹理贴图实现滚动字幕
|
Web App开发 移动开发 前端开发
H5:画布Canvas基础知识讲解(三)之文字、阴影、颜色渐变
​上一节介绍了H5:画布Canvas基础知识讲解(二)之插入图像、像素级操作,接下来继续讲解H5:画布Canvas基础。
|
前端开发
canvas如何绘制标签,在知识的海洋狗刨(下)
下面总结了一些canvas绘制标签的心得体会,希望能够对你有所帮助。

热门文章

最新文章