06、canvas标签之绘制曲线

来源：互联网发布：软件开发的公司编辑：程序博客网时间：2024/06/07 20:25

绘制曲线
  .arcTo(x1,y1,x2,y2,r)
      x1,y1 坐标一 x2,y2坐标二 r圆弧半斤
  .quadraticCurveTo(dx,dy,x1,y1)
      贝塞尔曲线:dx,dy控制点 x1,y1结束坐标
.bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)
      贝塞尔曲线:dx1,dy1 控制点一 dx2,dy2控制点二
      x1,y1结束坐标

<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title><style>#canvas{background:#b086a3;}</style></head><body><canvas id='canvas' width='500px' height='500px'>您的浏览器不支持，请更新浏览器!</canvas><script>/*设置绘图样式：fillStyle: 填充颜色strokeStyle: 触笔颜色lineWidth: 触笔宽度(线宽)图形边界样式：lineJoin : 边界连接点样式miter(默认值),round(圆角),bevel(斜角)lineCap: 端点样式butt(默认值),round(圆角),square(高度多出线宽一半)绘制曲线arcTo(x1,y1,x2,y2,r)x1,y1 坐标一  x2,y2坐标二   r圆弧半斤quadraticCurveTo(dx,dy,x1,y1)贝塞尔曲线:dx,dy控制点  x1,y1结束坐标bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)贝塞尔曲线:dx1,dy1 控制点一 dx2,dy2控制点二 x1,y1结束坐标*/var ocan = document.getElementById('canvas');var oCanvas = ocan.getContext("2d");//那大canvas并2d渲染环境;oCanvas.fillStyle='#ff00ff';//设置填充颜色oCanvas.strokeStyle='#336666';//设置触笔方法的颜色oCanvas.lineWidth=5;//设置触笔宽度(线宽)/*绘制曲线*/oCanvas.moveTo(100,200);//设置绘制起点oCanvas.arcTo(100,100,200,100,50);oCanvas.stroke();//触笔方法//oCanvas.fill();//填充方法oCanvas.moveTo(300,150);//设置绘制起点oCanvas.arcTo(300,100,400,100,50);oCanvas.stroke();//触笔方法//oCanvas.fill();//填充方法oCanvas.moveTo(100,250);//设置绘制起点oCanvas.quadraticCurveTo(100,300,200,300);//贝塞尔曲线:dx,dy控制点  x1,y1结束坐标oCanvas.stroke();//触笔方法//oCanvas.fill();//填充方法oCanvas.moveTo(300,250);//设置绘制起点oCanvas.quadraticCurveTo(300,300,400,400,500,400);//贝塞尔曲线:dx1,dy1 控制点一 dx2,dy2控制点二 x1,y1结束坐标oCanvas.stroke();//触笔方法//oCanvas.fill();//填充方法</script></body></html>

0 0