canvas圆弧、椭圆、贝塞尔曲线、文本、对齐方式、绘制图片及切图案例
想了解更全面的canvas API可以点击右侧: canvas简介及常用APIcanvas绘制圆弧arc(x, y, r, startAngle, endAngle, anticlockwise)x,y为圆心的坐标radius 为圆形的半径startAngle 为弧度的起始位置,0是正x轴的endAngle为弧度的终点位置,anticlockwise布尔值,true为逆时针绘制,false为顺时针
·
想了解更全面的canvas API可以点击右侧: canvas简介及常用API
canvas绘制圆弧
arc(x, y, r, startAngle, endAngle, anticlockwise)
- x,y为圆心的坐标
- radius 为圆形的半径
- startAngle 为弧度的起始位置,0是正x轴的
- endAngle 为弧度的终点位置,
- anticlockwise 布尔值,true为逆时针绘制,false为顺时针绘制
<script type="text/javascript">
// 获取画布
var canvas =document.getElementById('canvas');
// 设置画布的宽高
canvas.width=800;
canvas.height=600;
// 获取画笔
var ctx =canvas.getContext('2d');
// 绘制圆形
ctx.beginPath();
ctx.arc(100,100,50,0,360);
ctx.stroke();
ctx.beginPath();
// ctx.arc(300,100,50,0,2222);
/*
画圆可以将角度转换成弧度
弧度=（Math.PI/180）* 角度
*/
ctx.arc(300,100,50,0,(Math.PI/180)*90);
ctx.stroke();
// 逆时针绘制圆
ctx.beginPath();
ctx.arc(500,100,50,0,(Math.PI/180)*90,true);
ctx.stroke();
</script>
arcTo(x1,y1,x2,y2,r)
- x1,y1 坐标 1
- x2,y2 坐标 2
- radius 为圆形的半径
根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点
<script type="text/javascript">
// 获取画布
var canvas =document.getElementById('canvas');
// 设置画布的宽高
canvas.width=800;
canvas.height=600;
// 获取画笔
var ctx =canvas.getContext('2d');
/* arcTo(x1,y1,x2,y2,r)
1. x1,y1 坐标 1
2. x2,y2 坐标 2
3. radius 为圆形的半径
根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点 */
ctx.beginPath();
ctx.moveTo(50,50);//起始位置
ctx.arcTo(200,50,200,200,100);
ctx.stroke();
ctx.beginPath();
// ctx.rect(50,50,5,5);
// ctx.rect(200,50,5,5);
// ctx.rect(200,200,5,5);
// ctx.fill();
ctx.moveTo(50,50);
ctx.lineTo(200,50);
ctx.lineTo(200,200);
ctx.stroke();
</script>
canvas绘制椭圆（Google可以使用）
<script type="text/javascript">
// 获取画布
var canvas =document.getElementById('canvas');
// 设置画布的宽高
canvas.width=800;
canvas.height=600;
// 获取画笔
var ctx =canvas.getContext('2d');
/*
如何绘制椭圆 ?
elipse 方法
1. x,y为椭圆的坐标
2. radiusX，radiusX 长半轴的长度
3. rotation :椭圆旋转的角度(单位是度不是弧度)
4. startAngle 为椭圆的起始位置(是度，不是弧度)
5. endAngle 为椭圆的结束位置(是度，不是弧度)
6. anticlockwise 布尔值,true为逆时针绘制,false为顺时针绘制
弧度 = (Math.PI/180)*角度
角度 = (180*弧度)/π 180/(Math.PI)*360
*/
ctx.beginPath();
ctx.ellipse(400,300,300,150,0,0,180/(Math.PI)*360);
ctx.stroke();
</script>
canvas 贝塞尔曲线
- 贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。
- 一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。
- 贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具如PhotoShop等。
二次贝塞尔曲线
quadraticCurveTo(cp1x, cp1y, x, y)
1.绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。
2.起始点为moveto时指定的点
<script type="text/javascript">
// 获取画布
var canvas = document.getElementById('canvas');
// 设置画布的宽高
canvas.width = 800;
canvas.height = 600;
// 获取画笔
var ctx = canvas.getContext('2d');
/*
quadraticCurveTo(cp1x, cp1y, x, y)
1.绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。
2.起始点为moveto时指定的点
*/
ctx.beginPath();
ctx.moveTo(0, 200); //设置起始点
// 0,200 起始点 75,50 控制点 300,200 结束点
// 绘制二次贝塞尔曲线
ctx.quadraticCurveTo(75, 50, 300, 200);
// ctx.quadraticCurveTo(75,50,300,200,100,100);//无效的
ctx.stroke();
// 绘制上面曲线的控制点和控制线
ctx.beginPath();
ctx.strokeStyle = "#FF1493";
ctx.moveTo(75, 50); //设置起始点
ctx.lineTo(0, 200);
ctx.moveTo(75, 50); //设置起始点
ctx.lineTo(300, 200);
ctx.stroke();
</script>
三次贝塞尔曲线
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
1.绘制三次贝塞尔曲线，cp1x,cp1y为控制点1，cp2x,cp2y为控制点2，x,y为结束点。
2.起始点为moveto时指定的点
<script type="text/javascript">
// 获取画布
var canvas = document.getElementById('canvas');
// 设置画布的宽高
canvas.width = 800;
canvas.height = 600;
// 获取画笔
var ctx = canvas.getContext('2d');
/*
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
1.绘制三次贝塞尔曲线，cp1x,cp1y为控制点1，cp2x,cp2y为控制点2，x,y为结束点。
2.起始点为moveto时指定的点
*/
ctx.beginPath();
ctx.moveTo(40, 200); //设置起始点
// 绘制三次贝塞尔曲线
ctx.bezierCurveTo(20, 100, 100, 120, 200, 200)
ctx.stroke();
// 绘制上面曲线的控制点和控制线
ctx.beginPath();
ctx.strokeStyle = "#FF1493";
ctx.moveTo(40, 200); //设置起始点
ctx.lineTo(20, 100);
ctx.lineTo(100, 120);
ctx.lineTo(200, 200);
ctx.stroke();
</script>
canvas 绘制文本
在canvas中提供了两种方法来渲染文本：
fillText(text,x,y);text: 文本x,y : 在指定的(x,y)位置填充指定的文本strokeText(text,x,y);text : 文本x,y : 在指定的(x,y)位置填充指定的文本
<script type="text/javascript">
// 获取画布
var canvas = document.getElementById('canvas');
// 设置画布的宽高
canvas.width = 800;
canvas.height = 600;
// 获取画笔
var ctx = canvas.getContext('2d');
/*
1. fillText(text,x,y);
text : 文本
x,y : 在指定的(x,y)位置填充指定的文本
2.strokeText(text,x,y);
text : 文本
x,y : 在指定的(x,y)位置填充指定的文本
textAlign=value //左右对齐
文本对齐选项. 可选的值包括： left, right center.
textBaseline
文本上下对齐： top 、middle、bottom；
*/
ctx.font = '50px 楷体'; //设置字体大小，字体样式
ctx.fillStyle = 'red';
ctx.textAlign = 'center';
// ctx.textBaseline='middle';
ctx.fillText('迎头', 100, 100);
ctx.font = '50px 楷体'; //设置字体大小，字体样式
ctx.strokeStyle = 'red';
ctx.textAlign = 'left';
ctx.strokeText('李波', 100, 250);
var text = ctx.measureText('迎头');
console.log(text);
// 绘制基准线
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.moveTo(100, 0);
ctx.lineTo(100, 400);
ctx.stroke();
// 文本绘制的起始点
ctx.beginPath();
ctx.fillStyle = 'blue';
ctx.rect(100, 100, 5, 5);
ctx.fill();
// 绘制矩形
ctx.beginPath();
ctx.fillStyle = 'red';
ctx.fillRect(100, 110, 100, 50);
</script>
对齐方式设置
-
font=value
当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法.
默认的字体是 10px sans-serif。
font属性在指定时，必须要有大小和字体 缺一不可 -
textAlign=value
文本对齐选项. 可选的值包括： left, right center. -
measureText()
方法返回一个 TextMetrics 对象，包含关于文本尺寸的信息（例如文本的宽度）
<script type="text/javascript">
// 获取画布
var canvas = document.getElementById('canvas');
// 设置画布的宽高
canvas.width = 800;
canvas.height = 600;
// 获取画笔
var ctx = canvas.getContext('2d');
ctx.font = '60px 楷体'; //设置字体大小，字体样式
ctx.fillStyle = 'red';
// ctx.textAlign='center';
// ctx.textBaseline='middle';
var w = ctx.measureText('迎头').width;
ctx.fillText('迎头', (canvas.width - w) / 2, (canvas.height - 60) / 2);
// 绘制基准线
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.moveTo(400, 0);
ctx.lineTo(400, 600);
ctx.stroke();
</script>
canvas 绘制图片
在canvas中提供了drawImage方法来绘制图片/切图：
- drawImage(image, x, y, width, height)
image :图片对象
x, y ：画布x,y坐标
width, height ：图片的宽高 - drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
sx,sy,sw,sh:源图像切片位置和大小
dx,dy,dw,dh:定义切片的目标显示位置和大小
<script type="text/javascript">
// 获取画布
var canvas = document.getElementById('canvas');
// 设置画布的宽高
canvas.width = 800;
canvas.height = 600;
// 获取画笔
var ctx = canvas.getContext('2d');
/*
在canvas中提供了drawImage方法来绘制图片/切图：
1. drawImage(image, x, y, width, height)
image :图片对象
x, y ：画布x,y坐标
width, height ：图片的宽高
*/
// 创建img元素
var img = new Image();
img.src = './img/1.png';
// 加载图片
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
// 绘制img标签元素中的图片
var img2 = document.querySelector('img');
img2.onclick = function() {
var w = img2.width / 2;
var h = img2.height / 2;
// 上一张图片的宽高
var x = img.width;
var y = img.height;
console.log(w, h)
ctx.drawImage(img2, x, y, w, h);
}
</script>
canvas 切图
<script type="text/javascript">
// 获取画布
var canvas =document.getElementById('canvas');
// 设置画布的宽高
canvas.width=800;
canvas.height=600;
// 获取画笔
var ctx =canvas.getContext('2d');
/*
2.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
sx,sy,sw,sh:源图像切片位置和大小
dx,dy,dw,dh:定义切片的目标显示位置和大小
*/
// 绘制img标签元素中的图片
var img2 =document.querySelector('img');
img2.onclick=function(){
var w =img2.width;
var h=img2.height;
ctx.drawImage(img2,80,0,135,95,50,50,w,h);
}
</script>
制作整理不易，以上内容均为原创（参考了部分官方文档和老师整理的案例）。如要引用请附上本文链接，如有疑问可以在评论区畅所欲言，作者看到会第一时间回复，欢迎交流！
CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！
更多推荐
2
0- 0
已为社区贡献3条内容
所有评论(0)