Canvas 详解（二）绘制圆形或弧线 绘制文本

最新推荐文章于 2023-02-22 15:11:32 发布
最新推荐文章于 2023-02-22 15:11:32 发布
阅读量2.5k 收藏 6
点赞数 2
分类专栏： html5 文章标签： html canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Charissa2017/article/details/104702726
版权

绘制圆弧

有两个方法可以绘制圆弧：

1、arc()

arc(x, y, radius, startAngle, endAngle, anticlockwise)

以(x, y) 为圆心，以r 为半径，从 startAngle 弧度开始到endAngle弧度结束。anticlosewise 是布尔值，true 表示逆时针，false 表示顺时针(默认是顺时针)。

  • 角度转弧度公式为 Math.PI / 180 * deg；
  • 弧度是以 x 轴正方向为基准，进行顺时针或逆时针进行旋转的；
  • 当逆时针绘制时，如果要绘制一个 60 度的扇形，则角度值要用 360 减去 60 后的值。

绘制方向与角度的关系：
canvas
代码如下：

init();
var ctx;
function init() {
    let canvas = document.createElement("canvas");
    document.body.appendChild(canvas);
    if (!canvas.getContext) return;
    ctx = canvas.getContext("2d");
    ctx.strokeRect(0,0,300,150);
    draw();     
}
function draw(){
	//左侧，顺时针绘制
    ctx.beginPath();
    ctx.moveTo(70,70)
    ctx.arc(70,70,50,Math.PI/180*0,Math.PI/180*60,);
    ctx.fillStyle="blue";
    ctx.fill();
    //右侧，逆时针绘制
    ctx.beginPath();
    ctx.moveTo(200,70)
    ctx.arc(200,70,50,Math.PI/180*0,Math.PI/180*60,true);
    ctx.fillStyle="blue";
    ctx.fill();
}

绘制一个笑脸：

canvas
代码如下：

init();
var ctx;
function init() {
    let canvas = document.createElement("canvas");
    document.body.appendChild(canvas);
    if (!canvas.getContext) return;
    ctx = canvas.getContext("2d");
    ctx.strokeRect(0,0,300,150);
    ctx.strokeStyle="orange"
    draw();     
}
function draw(){
	//右边眼睛
    ctx.beginPath();
    ctx.arc(40,40,10,Math.PI/180*0,Math.PI/180*180,true);
    ctx.stroke();
    //右边眼睛
    ctx.beginPath();
    ctx.arc(70,40,10,Math.PI/180*0,Math.PI/180*180,true);
    ctx.stroke();
    //嘴巴
    ctx.beginPath();
    ctx.arc(55,50,20,Math.PI/180*20,Math.PI/180*160);
    ctx.stroke();
    //脸
    ctx.beginPath();
    ctx.arc(55,50,40,Math.PI/180*0,Math.PI/180*360);
    ctx.stroke();
}

绘制环状图：

canvas
代码如下：

init();
var ctx;
function init() {
	let canvas = document.createElement("canvas");
	document.body.appendChild(canvas);
	if (!canvas.getContext) return;
	ctx = canvas.getContext("2d");
	ctx.strokeRect(0,0,300,150);
	draw();     
}
//环状图
function draw(){
	//外侧半圆弧线
	ctx.beginPath();
	ctx.arc(120,100,90,Math.PI/180*0,Math.PI/180*180,true);
	ctx.fillStyle="red";
	ctx.fill();
	//内侧半圆弧线
	ctx.beginPath();
	ctx.arc(120,100,65,Math.PI/180*0,Math.PI/180*180,true);
	ctx.fillStyle="white";
	ctx.fill();
	//外侧弧度弧线
	ctx.beginPath();
	ctx.moveTo(122,100)
	ctx.arc(120,100,90,Math.PI/180*0,Math.PI/180*300,true);
	ctx.fillStyle="blue";
	ctx.fill();
	//内侧弧度弧线
	ctx.beginPath();
	ctx.moveTo(120,100)
	ctx.arc(120,100,65,Math.PI/180*0,Math.PI/180*300,true);
	ctx.fillStyle="white";
	ctx.fill();
}

2、arcTo()

arcTo(x1, y1, x2, y2, radius)

根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点。x1,y1为第一个控制点坐标；x2,y2为第二个控制点坐标；radius为圆弧半径。

  • 这个方法可以这样理解。绘制的弧形是由两条切线所决定。
  • 第 1 条切线：起始点和控制点1决定的直线。
  • 第 2 条切线：控制点1 和控制点2决定的直线。
  • ​其实绘制的圆弧就是与这两条直线相切的圆弧。
    canvas
    代码如下：
init();
var ctx;
function init() {
    let canvas = document.createElement("canvas");
    document.body.appendChild(canvas);
    if (!canvas.getContext) return;
    ctx = canvas.getContext("2d");
    ctx.strokeRect(0,0,300,150);
    ctx.strokeStyle="orange"
    draw();     
}
function draw(){
    ctx.moveTo(90, 30);
    ctx.arcTo(200, 30, 200, 150, 100);
    ctx.stroke();
}

绘制贝塞尔曲线

贝塞尔曲线于 1962，由法国工程师皮埃尔·贝塞尔（Pierre Bézier）所广泛发表，他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau 于 1959 年运用 de Casteljau 演算法开发，以稳定数值的方法求出贝兹曲线。

贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。

quadraticCurveTo()

二次贝塞尔曲线，quadraticCurveTo(x1,y1,x2,y2)，前两个参数为控制点坐标，后两个参数为结束点坐标。
canvas
代码如下：

function draw() {
    ctx.beginPath();
    ctx.moveTo(25, 100);      
    ctx.quadraticCurveTo(20, 50, 100, 100);
    ctx.stroke();
}

绘制圆角矩形

canvas
代码如下：

init();
var ctx;
function init() {
    let canvas = document.createElement("canvas");
    document.body.appendChild(canvas);
    if (!canvas.getContext) return;
    ctx = canvas.getContext("2d");
    ctx.strokeRect(0, 0, 300, 150);
    ctx.strokeStyle = "orange";
    ctx.lineWidth=5;
    draw();
}
function draw() {
    var x=20,y=20;
     var width=150,height=100;
     var radius=20;
     ctx.beginPath();
     ctx.moveTo(x, y + radius);
     ctx.lineTo(x, y + height - radius);
     ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
     ctx.lineTo(x + width - radius, y + height);
     ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
     ctx.lineTo(x + width, y + radius);
     ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
     ctx.lineTo(x + radius, y);
     ctx.quadraticCurveTo(x, y, x, y + radius);
     ctx.stroke();
}

绘制爱心：

canvas
代码如下：

init();
var ctx;

function init() {
    let canvas = document.createElement("canvas");
    document.body.appendChild(canvas);
    if (!canvas.getContext) return;
    ctx = canvas.getContext("2d");
    ctx.strokeRect(0, 0, 300, 150);
    ctx.strokeStyle = "orange";
    ctx.lineWidth=5;
    draw();
}
function draw() {      
    ctx.beginPath();
    ctx.moveTo(75, 40);
    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
    ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
    ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
    ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
    ctx.stroke();
}

绘制文本

canvas 提供了两种方法来渲染文本:

  • fillText(text, x, y [, maxWidth]) ，指在指定的 (x,y) 位置填充指定的文本，最后一个参数绘制的最大宽度是可选的。
  • strokeText(text, x, y [, maxWidth]) 在指定的 (x,y) 位置绘制文本边框，最后一个参数绘制的最大宽度是可选的。

设置文本样式：

  • font = value 当前我们用来绘制文本的样式。这个字符串使用和 CSS font 属性相同的语法。 默认的字体是 10px sans-serif。
  • textAlign = value 文本对齐选项。 可选的值包括：start, end, left, right or center。 默认值是 start。
值描述
start、leftstart为默认值。文本在指定的位置开始，left表示文本左对齐。
end、right文本在指定的位置结束，right表示文本右对齐。
center文本的中心被放置在指定的位置

在指定位置的y值画一条线，各个值效果如下：
canvas

  • textBaseline = value 基线对齐选项，可选的值包括：alphabetic, top, hanging, middle, ideographic, bottom。默认值是 alphabetic。
值描述
alphabetic默认。文本基线是普通的字母基线。
top文本基线是 em 方框的顶端。
hanging文本基线是悬挂基线。
middle文本基线是 em 方框的正中。
ideographic文本基线是表意基线。
bottom文本基线是 em 方框的底端。

在指定位置的x值画一条线，各个值效果如下：
canvas

  • direction = value 文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。
  • measureText()，将返回一个 TextMetrics 对象的宽度、所在像素，这些体现文本特性的属性。

canvas
代码如下：

init();
var ctx;
function init() {
    let canvas = document.createElement("canvas");
    document.body.appendChild(canvas);
    if (!canvas.getContext) return;
    ctx = canvas.getContext("2d");
    ctx.strokeRect(0, 0, 300, 150);
    draw();
}
function draw() {      
    ctx.fillStyle="red";
    ctx.strokeStyle="blue";
    ctx.font="40px 宋体";
    ctx.textBaseline="top";
    ctx.fillText("Canvas",50,20);
    ctx.strokeText("Canvas",50,80);
    var text=ctx.measureText("Canvas");
    console.log(text);//打印结果如下
}

ctx.measureText() 打印结果：
canvas

案例：绘制对话气泡

canvas
代码如下：

init();
var ctx;
function init() {
    let canvas = document.createElement("canvas");
    document.body.appendChild(canvas);
    if (!canvas.getContext) return;
    ctx = canvas.getContext("2d");
    ctx.strokeRect(0, 0, 300, 150);
    draw();
}
function draw() {
	ctx.strokeStyle = "orange";
	ctx.lineCap="round";
	ctx.lineWidth=5;
	//绘制气泡
	ctx.beginPath();
	ctx.moveTo(75, 25);
	ctx.quadraticCurveTo(25, 25, 25, 62.5);
	ctx.quadraticCurveTo(25, 100, 50, 100);
	ctx.quadraticCurveTo(50, 120, 30, 125);
	ctx.quadraticCurveTo(60, 120, 65, 100);
	ctx.quadraticCurveTo(125, 100, 125, 62.5);
	ctx.quadraticCurveTo(125, 25, 75, 25);
	ctx.stroke();
	//绘制文字
	ctx.fillStyle = "red";
	ctx.shadowOffsetX = 2;
	ctx.shadowOffsetY = 2;
	ctx.shadowBlur = 2;
	ctx.shadowColor = "#999";
	ctx.font = "24px 宋体";
	ctx.textBaseline = "top";
	ctx.fillText("Canvas", 35, 50);
}
蒲公英芽
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5画布沿弧路径文本
limeiyans喜欢编程的那些事
01-10 839
body { margin: 0px; padding: 0px; } function drawTextAlongArc(context, str, centerX, centerY, radius, angle) { var len = str.length, s;
Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)
热门推荐
任海丽(3G/移动开发)
01-20 30万+
1、首先说一下canvas类： Class Overview The Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing into t
canvas圆环和圆弧，并添加文字
最新发布
九段刀客的博客
02-22 939
【代码】canvas圆环和圆弧，并添加文字。
html5使用位移绘制五环,HTML5 Canvas中的桥文本效果
weixin_39892460的博客
06-30 96
位移至少有两种方法可以实现弯曲的文本效果 - 两者都有相同的像素位移原理(相对于它们的实际位置将它们移出位置)，这只是我们用来做哪种方法的问题此在下面的演示中，我将使用内部drawImage方法进行简单切片。可选我们可以迭代像素缓冲区并手动投影像素，但对于这样的情况，使用切片IMO更简单，我们可以免费获得抗锯齿。示例+演示以下是一个完整的示例(请参阅滑块和自定义文本的演示)：结果将是：var ct...
Canvas变形操作及示例代码分析
gc_2299的博客
02-13 285
介绍Canvas中的平移、旋转和缩放函数，并分析参考文献中的时钟、印象等示例代码。
学习Canvas基础-绘制弧线和曲线
qq_67983277的博客
11-16 3234
学习Canvas基础-绘制弧线和曲线
canvas 绘制圆弧
Abudula__的博客
12-11 5886
前面给大家讲解了怎么绘制矩形和线条，接下来将讲解下如何在 canvas 画布上 绘制圆弧和圆形。 相对矩形来说，绘制圆弧则更为复杂。绘制圆弧需要确定圆心的坐标，圆弧的角度以及绘制圆弧的绘制方法等等。 context.arc() 在 Canvas 中我们可以使用 context.arc() 的方法来创建圆弧路径。简单来说，在 Canvas 中，创建一条圆弧路径是从与圆心(x, y)距离为一个半...
说说如何使用 Canvas 绘制弧线与曲线
读万卷书，行万里路
08-02 4462
绘制弧线前，我们需要先了解角度与弧度的概念。 1 角度与弧度 （1）角度 两条射线从圆心向圆周射出，形成一个夹角和夹角正对的一段弧。当弧长正好等于圆周长的 360 分之一时，两条射线的夹角的大小为1度 。( 单位 :º ） （2）弧度 两条射线从圆心向圆周射出，形成一个夹角和夹角正对的一段弧。当这段弧长正好等于圆的半径时，两条射线的夹角大小为1弧度（单位：rad)。具体计算公式为： rad 即弧度单词 radian 的缩写。 角度转换为弧度，推导与计算公式为： 2 弧线 弧线可以是圆，也可以是圆的
HTML弧度文本,[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)...
weixin_39715907的博客
06-15 445
canvas提供两种输出文本的方式：strokeText：描边文本fillText：填充文本fillStyle配合fillText使用，strokeStyle配合strokeText使用strokeText用法：cxt.strokeText( text， x, y, [maxwidth] )text：需要输出的文本内容x：最左边的文本输出的横坐标位置y：最左边的文本的 左下角的纵坐标maxWid...
详解canvas在圆弧周围绘制文本的两种写法
09-28
主要介绍了详解canvas在圆弧周围绘制文本的两种写法，直接按弧度进行编写的，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Canvas画布 js属性arcTo弧线画法详解
01-08
下面是一个简单的示例代码，展示了如何使用`arcTo()`在Canvas上绘制弧线： ```javascript $(function() { var canvas = $('#canvas')[0]; var item = canvas.getContext('2d'); item.strokeStyle = 'rgb(188,219...
详解HTML5 canvas绘图基本使用方法
09-28
`arc(x, y, radius, startAngle, endAngle, anticlockwise)`用于绘制圆形或弧线，`fillText(text, x, y, maxWidth)`则可以将文本写入画布。 在处理图形时，还可以利用`clearRect(x, y, width, height)`清除指定区域...
canvas简单实例详解
11-10
3. **圆形和弧线**：`arc(x, y, radius, startAngle, endAngle, anticlockwise)`用于绘制圆或弧线。 ```javascript ctx.beginPath(); ctx.arc(300, 50, 50, 0, Math.PI * 2, false); ctx.fill(); ``` 4. **文本绘制*...
HTML5 Canvas开发详解（第2版）源码
02-22
1. **基本绘图**：Canvas API提供了基础的绘图操作，如`fillRect()`、`strokeRect()`用于绘制矩形，`beginPath()`、`moveTo()`、`lineTo()`用于绘制路径，`arc()`用于绘制圆或弧线。`fillStyle`和`strokeStyle`分别...
《HTML5 Canvas开发详解(第2版)》第二版示例代码
11-09
Canvas API提供了大量的绘图方法，如`fillRect()`用于画矩形，`beginPath()`和`stroke()`、`fill()`用于绘制路径，`arc()`用于画圆或弧线，`moveTo()`和`lineTo()`则用于绘制线条。这些基础方法是构建复杂图形的基础...
cnvas 抽奖转盘弧形文字
placebo1996的博客
01-15 1151
canvas 实现环形文字,使抽奖转盘内容可配置
HTML5（九）canvas操作文字实例之转盘
北风
02-05 2469
效果图： 源码： canvas操作文字实例之转盘 canvas{ background:#ccc; } window.onload=function(){ var canvas = document.getElementById("canvas"); var cobj = canvas.getContext
Canvas—绘画圆弧
weixin_47348518的博客
08-23 2659
本文你将会学会如何使用canvas绘画优美的线条
弧形文字+弧形canvas
hanbing_1289的博客
10-09 2370
https://yq.aliyun.com/articles/36045

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值