当前位置: 首页 > Web前端 > HTML5

Canvas学习笔记——绘制简单路径

时间:2023-04-05 21:19:45 HTML5

3.1线段(直线路径)绘制线段的一般步骤:moveTo(x,y)将画笔移动到指定坐标点(x,y)lineTo(x,y)用直线连接当前端点和指定坐标点(x,y)stroke()根据当前画线样式绘制当前或现有路径3.2矩形路径绘制矩形路径的一般步骤:rect(x,y,width,height)矩形路径,坐标Point(x,y),widthheight,stroke()orfill根据当前样式绘制或者填充路径也可以使用上面提到的strokeRect或者fillRect,或者stitch通过lineTo变成一个矩形3.3圆弧路径先看画圆弧的API:ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise);x,y为圆弧圆心,radius为圆弧半径,startAngle为起点,endAngle为圆弧终点,anticlockwise默认为顺时针,TruecounterclockwiseCSS使用角度(deg)进行旋转,但是arc函数表示角度的单位是弧度,而不是角度。角度和弧度的js表达式:弧度=(Math.PI/180)*角度(deg)。这里的弧度是以x轴正方向为基准,默认顺时针旋转角度来计算图示:(图片来自沙漠)ctx.beginPath();ctx.arc(200,100,100,0,Math.PI/2,false);ctx.closePath();ctx.stroke();ctx.fill();arc示例