HTML5——Canvas绘制曲线 太过爱你忘了你带给我的痛 2023-03-01 09:17 255阅读 0赞 ### Canvas绘制曲线 ### * 绘制曲线 * * * * 绘制圆形 * 绘制弧形 * 二次贝塞尔 * 三次贝塞尔 * Canvas变形 * * * * translate(x, y) * rotate(angle) * scale(x, y) # 绘制曲线 # 角度与弧度的js表达式(相当高中的弧度制:radians=(Math.PI/180)\*degrees <table> <thead> <tr> <th>曲线</th> <th>函数</th> </tr> </thead> <tbody> <tr> <td>圆形</td> <td>arc(x, y, radius, startAngle, endAngle, anticlockwise)</td> </tr> <tr> <td>弧形</td> <td>arcTo(x1, y1, x2, y2, radius)</td> </tr> <tr> <td>二次贝塞尔</td> <td>quadraticCurveTo(cp1x, cp1y, x, y)</td> </tr> <tr> <td>三次贝塞尔</td> <td>bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)</td> </tr> </tbody> </table> #### 绘制圆形 #### 对象.arc(参数一,参数二,参数三,参数四,参数五, 参数六) //绘制一个圆形 --- /* * 参数1:开始的横坐标 * 参数2:开始的纵坐标 * 参数3:半径 * 参数4:开始的角度 * 参数5:结束的角度 * 参数6:方向---true 或者是 false,默认是false,是顺时针, * * 参数4和参数5---本身是弧度---角度*Math.PI/180 * * * */ //ctx.moveTo(100,100); ctx.lineWidth=20; ctx.arc(100,100,50,0,360*Math.PI/180); //ctx.closePath(); ctx.stroke(); #### 绘制弧形 #### 对象.arcTo(参数一,参数二,参数三,参数四,参数五) //起点 ctx.moveTo(50,50); /* *参数1:控制点的横坐标 * 参数2:控制点的纵坐标 * 参数3:结束点的横坐标 * 参数4:结束点的纵坐标 * 参数5:半径 * */ ctx.arcTo(200,50,200,200,100); ctx.lineTo(180,200); //绘制 ctx.stroke(); #### 二次贝塞尔 #### 对象.quadraticCurveTo(参数一,参数二,参数三,参数四) ctx.moveTo(50,200); /* * 参数1:控制点的横坐标 * 参数2:控制点的纵坐标 * 参数3:结束点的横坐标 * 参数4:结束点的纵坐标 * */ ctx.quadraticCurveTo(200,50,250,180); ctx.stroke();//绘制 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70] #### 三次贝塞尔 #### 对象.bezierCurveTo(参数一,参数二,参数三,参数四,参数五, 参数六) ctx.moveTo(100,200); /* * * 参数1:控制点1的横坐标 * 参数2:控制点1的纵坐标 * 参数3:控制点2的横坐标 * 参数4:控制点2的纵坐标 * 参数5:结束点的横坐标 * 参数6:结束点的纵坐标 * */ ctx.bezierCurveTo(50,50,200,150,150,300); ctx.stroke();//绘制 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 1] # Canvas变形 # #### translate(x, y) #### 1. 我们先介绍 translate 方法,它用来移动 canvas的原点到一个不同的位置。 2. translate 方法接受两个参数。x 是左右偏移量,y 是上下偏移量. 在canvas中translate是累加的 #### rotate(angle) #### 1. 这个方法只接受一个参数:旋转的角度(angle),它是顺时针方向的,以弧度为单位的值。 2. 旋转的中心点始终是 canvas 的原点,如果要改变它,我们需要用到 translate 方法 在canvas中rotate是累加的 #### scale(x, y) #### 1. 参数1:横向的x轴的缩放因子,参数2:纵向的y轴的缩放因子 2. scale 方法接受两个参数。x,y 分别是横轴和纵轴的缩放因子,它们都必须是正值。 3. 值比 1.0 小表示缩小,比 1.0 大则表示放大,值为 1.0 时什么效果都没有。 4. 缩放一般我们用它来增减图形在 canvas 中的像素数目,对形状,位图进行缩小或者放大。 5. 如果先正常绘制,在设置缩放因子,那么先绘制的图,不会有影响 6. 如果先设置缩放因子,那么后面所有的图都有影响 在canvas中scale是累称的 ctx.scale(2,1); ctx.strokeStyle = "yellow"; ctx.strokeRect(100,200,100,100); ctx.save(); ctx.scale(1,1); ctx.strokeStyle = "red"; //注意开启新的路径才可以有不一样的样式 ctx.beginPath(); ctx.strokeRect(100,100,100,100); ctx.restore(); ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 2] [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70]: /images/20230209/c097d771c9214fe0a49e219d3339d3ea.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020072320153192.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg==,size_16,color_FFFFFF,t_70 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200723203359301.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg==,size_16,color_FFFFFF,t_70
还没有评论,来说两句吧...