方便个人理解而写的,有些内容是摘抄过来方便翻阅,
在JavaScript里写
<canvas id="canva" ></canvas>
<Script>
var can= document.getElementById("canva");
var ctx = can.getContext("2d")
</Script>
<canvas>只支持两种形式的图形绘制:矩形和路径(由一系列点连成的线段)。所有其他类型的图形都是通过一条或者多条路径组合而成的。
首先如果要画任何形状,它的坐标都是以左上角为原点开始的,所以如果为了方便自己画,可以将中心设置一下(不一定非要设置)
绘制矩形
①ctx.fillRect(x,y,width,height) 绘制一个填充内容的矩形,x,y:矩形起始点x/y轴坐标
ctx.fillStyle = 'green';
ctx.fillRect(20, 10, 150, 100);
②ctx.strokeRect(x, y, width, height); 方法绘制一个描边矩形,其起点为(x, y)
,其大小由宽度和高度指定。
ctx.strokeStyle = 'green';
ctx.strokeRect(20, 10, 160, 100);
③ctx.clearRect(x, y, width, height); 方法在一个矩形区域内设置所有像素都是透明的(rgba(0,0,0,0)
)。这个矩形范围的左上角在 (x, y)
,宽度和高度分别由 width
和height
确定。
ctx.clearRect(10, 10, 120, 100);
这里演示擦去其他的
绘制路径
步骤:
①创建路径起始点
②用画图命令去画出路径
③路径封闭
④生成路径,描边或填充去渲染。
生成路径的第一步:beginPath()
通过线条来绘制图形轮廓:stroke()
通过填充路径的内容区域生成实心的图形:fill()
闭合路径之后图形绘制命令又重新指向到上下文中:closePath()
设置起始点moveTo(x,y)
绘制直线lineTo(x,y)
调用fill()函数时,所有没有闭合的形状都会自动闭合,所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。
闭合路径closePath(),不是必需的,如果图形是已经闭合了的,即当前点为开始点,该函数什么也不做
绘制圆/圆弧
注意:
arc()
函数中表示角的单位是弧度,不是角度。角度与弧度的js表达式:弧度=(Math.PI/180)*角度。
arc(x,y,r,起始角度,终止角度,逆时针/顺时针(默认顺)true为逆时针)
用 translate(2/x,2/y)就很方便了。响应上面的改变中心
如果画一个圆,画布大小(200,180),半径80,这样就得到了一个黑色的圆了(圆点在中心)
ctx.translate(100, 90)
ctx.beginPath();
ctx.arc(0,0.80,0,2*Math.PI)
ctx.closePath();
ctx.fillStyle="black"
ctx.fill();
圆弧就是终止角度不满2pi,就是圆弧了
绘制三角形
ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.fill();
二次贝塞尔曲线及三次贝塞尔曲线
quadraticCurveTo(cp1x, cp1y, x, y)
绘制二次贝塞尔曲线,cp1x,cp1y
为一个控制点,x,y为
结束点。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
绘制三次贝塞尔曲线,cp1x,cp1y
为控制点一,cp2x,cp2y
为控制点二,x,y
为结束点。
二次贝塞尔曲线有一个开始点(蓝色)、一个结束点(蓝色)以及一个控制点(红色),而三次贝塞尔曲线有两个控制点。
参数x、y在这两个方法中都是结束点坐标。cp1x,cp1y
为坐标中的第一个控制点,cp2x,cp2y
为坐标中的第二个控制点。
一个气泡案例(我是搬运工,这里贝塞尔曲线不多说明了)
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// 二次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(75, 25);
ctx.quadraticCurveTo(25, 25, 25, 62.5);
ctx.quadraticCurveTo(25, 100, 50, 100);
ctx.quadraticCurveTo(50, 120, 30, 125);
ctx.quadraticCurveTo(60, 120, 65, 100);
ctx.quadraticCurveTo(125, 100, 125, 62.5);
ctx.quadraticCurveTo(125, 25, 75, 25);
ctx.stroke();
}
}
一个爱心案例
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
//三次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(75, 40);
ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
ctx.fill();
}
}
关于色彩
fillStyle=color 设置图形的填充颜色
stokeStyle=color 设置图形轮廓的颜色
默认情况下,线条和填充颜色都是黑色(CSS 颜色值 #000000
)
如果你要给每个图形上不同的颜色,你需要重新设置 fillStyle
或 strokeStyle
的值。
透明度 Transparency
globalAlpha=transparencyValue 默认为1.0,影响到里面所有图形的透明度(0-1)
或者rgba里面设置也可(x,x,x,0.5)
线型 Line Styles
lineWidth=value 线条宽度
属性值必须为整数,默认1.0,要注意绘制的线路,才能画出更精确的图,1.0的是左右各半像素
lineCap=type 线条末端样式
type有butt(默认值),round,square(端点加上了等宽且高度为一半线宽的方块)
lineJoin=type 线条间接合处的样式
type值 round(默认值),bevel,miter
miterLimit=value 限制两条线相交时接处最大长度
miterLimit属性
所见的应用
miter
的效果,线段的外侧边缘会被延伸交汇于一点上。线段之间夹角比较大时,交点不会太远,但随着夹角变小,交点距离会呈指数级增大,miterLimit
属性就是用来设定外延交点与连接点的最大距离,如果交点距离大于此值,连接效果会变成了 bevel。miterLimit
可以单独设置,不受显示比例改变或任何仿射变换的影响:它只影响线条边缘的有效绘制形状
miterLimit
= maxmiterLength
/lineWidth
= 1 / sin ( min θ / 2 )- 斜接限定值默认为10.0,这将会去除所有小于大约11度的斜接。
- 斜接限定值为√2 ≈ 1.4142136 (四舍五入)时,将去除所有锐角的斜接,仅保留钝角或直角。
- 1.0是合法的斜接限定值,但这会去除所有斜接。
- 小于1.0的值不是合法的斜接限定值
getLineDash()返回一个包含当前虚线样式,长度非负偶数的数组
setLineDash(segments) 设置当前虚线样式
用 setLineDash
方法和 lineDashOffset
属性来制定虚线样式. setLineDash
方法接受一个数组,来指定线段与间隙的交替;
lineDashOffset=value 设置虚线起始偏移量
lineDashOffset
属性设置起始偏移量.