canvas圆弧、椭圆、贝塞尔曲线、⽂本、对齐⽅式、绘制图⽚及切图案例想了解更全⾯的canvas API可以点击右侧:
canvas绘制圆弧
arc(x, y, r, startAngle, endAngle, anticlockwise)
1. x,y为圆⼼的坐标
2. radius 为圆形的半径
3. startAngle 为弧度的起始位置,0是正x轴的
4. endAngle 为弧度的终点位置,
5. anticlockwise 布尔值,true为逆时针绘制,false为顺时针绘制
// 设置画布的宽⾼
canvas.width=800;
canvas.height=600;
// 获取画笔
var ctx =Context('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)
1. x1,y1 坐标 1
2. x2,y2 坐标 2
3. radius 为圆形的半径
根据给定的控制点和半径画⼀段圆弧，最后再以直线连接两个控制点
<script type="text/javascript">
// 获取画布
var canvas =ElementById('canvas');
// 设置画布的宽⾼
canvas.width=800;
canvas.height=600;
/
/ 获取画笔
var ctx =Context('2d');
/*  arcTo(x1,y1,x2,y2,r)
1.  x1,y1 坐标 1
2.  x2,y2 坐标 2
3.  radius 为圆形的半径
根据给定的控制点和半径画⼀段圆弧，最后再以直线连接两个控制点 */
ctx.beginPath();
ctx.arcTo(200,50,200,200,100);
ctx.stroke();
ctx.beginPath();
// (50,50,5,5);
// (200,50,5,5);
// (200,200,5,5);
// ctx.fill();
ctx.lineTo(200,50);
ctx.lineTo(200,200);
ctx.stroke();
</script>
canvas绘制椭圆（Google可以使⽤）
/
/ 设置画布的宽⾼
canvas.width=800;
canvas.height=600;
// 获取画笔
var ctx =Context('2d');text align center
/*
如何绘制椭圆 ?
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时指定的点
// 设置画布的宽⾼
canvas.width =800;
canvas.height =600;
// 获取画笔
var ctx = Context('2d');
/*
quadraticCurveTo(cp1x, cp1y, x, y)
1.绘制⼆次贝塞尔曲线，cp1x,cp1y为⼀个控制点，x,y为结束点。
2.起始点为moveto时指定的点
*/
ctx.beginPath();
// 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.lineTo(0,200);
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 = ElementById('canvas');
// 设置画布的宽⾼
canvas.width =800;
canvas.height =600;
/
/ 获取画笔
var ctx = Context('2d');
/*
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
1.绘制三次贝塞尔曲线，cp1x,cp1y为控制点1，cp2x,cp2y为控制点2，x,y为结束点。
2.起始点为moveto时指定的点
*/
ctx.beginPath();
// 绘制三次贝塞尔曲线
ctx.bezierCurveTo(20,100,100,120,200,200)
ctx.stroke();
// 绘制上⾯曲线的控制点和控制线
ctx.beginPath();
ctx.strokeStyle ="#FF1493";
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 = ElementById('canvas');
// 设置画布的宽⾼
canvas.width =800;
canvas.height =600;
// 获取画笔
var ctx = Context('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';
// Baseline='middle';
ctx.fillText('迎头',100,100);
ctx.font ='50px 楷体';//设置字体⼤⼩，字体样式
ctx.strokeStyle ='red';
ctx.strokeText('李波',100,250);
var text = asureText('迎头');
console.log(text);
/
/ 绘制基准线
ctx.beginPath();
ctx.strokeStyle ='blue';
ctx.lineTo(100,400);
ctx.stroke();
// ⽂本绘制的起始点
ctx.beginPath();
ctx.fillStyle ='blue';
<(100,100,5,5);
ctx.fill();
/
/ 绘制矩形
ctx.beginPath();
ctx.fillStyle ='red';
ctx.fillRect(100,110,100,50);
</script>
对齐⽅式设置

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。