canvas绘制路径
Posted hack-ing
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas绘制路径相关的知识，希望对你有一定的参考价值。
2.画布api
canvas.getContext("2d");
canvas.width
canvas.height
var ctx = canvas.getContext("2d");
canvas.width=552;
canvas.height=800;
3.上下文api
ctx.fillRect(x,y,w,h):填充矩形
ctx.strokeRect(x,ymwmh):带边框的矩形
ctx.clearRect(0,0,oc.width,oc.height):清除整个画布
注意原点的位置
ctx.fillStyle
ctx.strokeStyle
ctx.lineWidth
var ctx=canvas.getContext("2d"); //设置图形的填充颜色 ctx.fillStyle = "blue"; //实心矩形 ctx.fillRect(0,0,100,100) //设置图形轮廓的颜色 ctx.strokeStyle = "blue"; //带边框的矩形 // 100 : 99.5 --- 100.5(99-101) // 100.5: 100 --- 101 ctx.strokeRect(100.5,100.5,100,100)
ctx.lineCap
CanvasRenderingContext2D.lineCap 是 Canvas 2D API 指定如何绘制每一条线段末端的属性。有3个可能的值，分别是：butt, round and square。默认值是 butt。
ctx.lineCap = "butt"; ctx.lineCap = "round"; ctx.lineCap = "square";
<script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(0,0); ctx.lineWidth = 15; ctx.lineCap = "round"; ctx.lineTo(100, 100); ctx.stroke(); </script>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html,body{ height: 100%; overflow: hidden; } body{ background: greenyellow; } #test{ position: absolute; top: 0; left: 0; right: 0; bottom:0; margin: auto; background: gray; } </style> </head> <body> <canvas id="test" width="300" height="300"> <span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span> </canvas> </body> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(0,0); ctx.lineWidth = 15; ctx.lineCap = "round"; ctx.lineTo(100, 100); ctx.stroke(); </script> </html>
ctx.lineJoin
Canvas 2D API 用来设置2个长度不为0的相连部分（线段，圆弧，曲线）如何连接在一起的属性（长度为0的变形部分，其指定的末端和控制点在同一位置，会被忽略）
ctx.lineJoin = "bevel"; ctx.lineJoin = "round"; ctx.lineJoin = "miter";
<script type="text/javascript"> var canvas = document.getElementById("test"); var ctx = canvas.getContext("2d"); ctx.lineWidth = 10; ctx.lineJoin = "round"; //清楚子路径列表,开始新路径 ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(200, 100); ctx.lineTo(300,0); ctx.stroke(); </script> </html>
ctx.moveTo(x,y):将画笔抬起点到x，y处
ctx.lineTo(x,y):将画笔移到x，y处
ctx.rect(x,y,w,h)
ctx.arc(x,y,r,degS,degE,dir)
ctx.arcTo(x1,y1,x2,y2,r):2个坐标，一个半径
结合moveTo(x,y)方法使用，
x,y:起始点
x1,y1：控制点
x2,y2：结束点
ctx.quadraticCurveTo(x1,y1,x2,y2)
结合moveTo(x,y)方法使用，
x,y:起始点
x1,y1：控制点
x2,y2：结束点
必须经过起点和终点
ctx.bezierCurveTo(x1, y1, x2, y2, x3, y3)
结合moveTo(x,y)方法使用，
x,y:起始点
x1,y1：控制点
x2,y2：控制点
x3，y3：结束点
必须经过起点和终点
ctx.fill()
ctx.stroke()
ctx.beginpath():清除路径容器
ctx.strokeStyle="red"; ctx.lineWidth="3"; ctx.moveTo(450,250); ctx.lineTo(550,50); ctx.lineTo(300,200); //绘制线段 ctx.stroke(); //闭合路径 ctx.closePath(); //充填内部 ctx.fill();
ctx.closepath():闭合路径
fill自动闭合
stroke需要手动闭合
ctx.save()
将画布当前状态(样式相关 变换相关)压入到样式栈中
ctx.restore()
将样式栈中栈顶的元素弹到样式容器中
图像最终渲染依赖于样式容器
ctx.save(); //关于样式的设置 //save restore成对出现 ctx.beginPath(); //关于路径 ctx.restore(); ctx.save(); //关于样式的设置 ctx.beginPath(); //关于路径 ctx.fill(); ctx.restore();
ctx.translate(x,y):将原点按当前坐标轴位移x，y个单位
ctx.rotate(弧度):将坐标轴按顺时针方向进行旋转
ctx.scale(因子):
放大：放大画布，画布中的一个css像素所占据的物理面积变大，画布中包含的css像素的个数变少
画布中图像所包含的css像素的个数不变
缩小：缩小画布，画布中的一个css像素所占据的物理面积变小，画布中包含的css像素的个数变多
画布中图像所包含的css像素的个数不变
以上是关于canvas绘制路径的主要内容，如果未能解决你的问题，请参考以下文章