canvas 是行内元素而不是块元素
html:
<canvas id="canvas" width="500" height="500"></canvas>
创建元素
直线:
var canvas = document.getElementById('canvas')
var context = canvas.getContext('2d')
context.beginPath()
context.moveTo(200, canvas.height / 2 - 50)
context.lineTo(canvas.width - 200, canvas.height / 2 - 50)
context.lineWidth = 20;
context.strokeStyle = '#0000ff'
context.lineCap = 'butt'
context.stroke()
context.beginPath()
context.moveTo(200, canvas.height / 2)
context.lineTo(canvas.width - 200, canvas.height / 2)
context.lineWidth = 20;
context.strokeStyle = '#0000ff'
context.lineCap = 'round'
context.stroke()
context.beginPath()
context.moveTo(200, canvas.height / 2 + 50)
context.lineTo(canvas.width - 200, canvas.height / 2 + 50)
context.lineWidth = 20;
context.strokeStyle = '#0000ff'
context.lineCap = 'square'
context.stroke()
注:斜线产生锯齿是由于计算机渲染规则引起的,直线则不会出现锯齿
注:context是一个无状态对象,即其属性定义的是无序的
注:当context.lineWidth>1 时,可以设置"线头" context.lineCap = butt | round | square
圆形:
var canvas = document.getElementById('canvas')
var context = canvas.getContext('2d')
var x = canvas.width / 2
var y = canvas.height / 2
var radius = 75
var startAngle = 1.1 * Math.PI
var endAngle = 1.9 * Math.PI
var counterClockwise = false
context.beginPath()
context.arc(x, y, radius, startAngle, endAngle, counterClockwise)
context.strockStyle = 'black'
context.stroke()
context.arc( centerpoint.x , centerpoint.y , radius , staringangle , endingangle , Anti-clockwise)
注:正圆 context.arc( centerpoint.x , centerpoint.y , radius , 0 , Math.PI , true)
注:Anti-clockwise为Boolean值,默认为true,即逆时针
注:staringangle ,endingangle 为角度 Math.PI = 180
注:半径终点到弧宽的中间
矩形:
context.rect(beginpoint.x , beginpoint.y , width , height );
二次曲线:
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.beginPath()
context.moveTo(188, 150)
context.quadraticCurveTo(188, 0, 488, 150)
context.lineWidth = 10
context.strokeStyle = 'black'
context.stroke()
context.moveTo( contextpoint.x , contextpoint.y )
context.quadraticCurveTo( controlpoint.x , controlpoint.y ,endingpoint.x ,endingpoint.x)
贝塞尔曲线(三阶):
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath()
context.moveTo(188, 130)
context.bezierCurveTo(140, 10, 288, 10, 388, 170)
context.lineWidth = 10
context.strokeStyle = 'black'
context.stroke()
context.moveTo(contextpoint.x , contextpoint.y)
context.bezierCurveTo(controlpoint1.x , controlpoint1.y , controlpoint2.x , controlpoint2.y, endingpoint.x endingpoint.y )
路径:
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath()
context.moveTo(100, 20)
context.lineTo(200, 160)
context.quadraticCurveTo(230, 200, 250, 120)
context.bezierCurveTo(290, -40, 300, 200, 400, 150)
context.lineTo(500, 90)
context.lineWidth = 5
context.strokeStyle = 'blue'
context.stroke()
绘制交点:
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.lineWidth = 25
context.beginPath()
context.moveTo(99, 150)
context.lineTo(149, 50)
context.lineTo(199, 150)
context.lineJoin = 'miter'
context.stroke()
context.beginPath()
context.moveTo(239, 150)
context.lineTo(289, 50)
context.lineTo(339, 150)
context.lineJoin = 'round'
context.stroke()
context.beginPath()
context.moveTo(379, 150)
context.lineTo(429, 50)
context.lineTo(479, 150)
context.lineJoin = 'bevel'
context.stroke()
context.lineJoin = miter | round | bevel
arcTo(x1, y1, x2, y2, radius)
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var rectWidth = 200
var rectHeight = 100
var rectX = 189
var rectY = 50
var cornerRadius = 50
context.beginPath()
context.moveTo(rectX, rectY)
context.lineTo(rectX + rectWidth - cornerRadius, rectY)
context.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + cornerRadius, cornerRadius)
context.lineTo(rectX + rectWidth, rectY + rectHeight)
context.lineWidth = 5
context.stroke()
arcTo()方法将利用当前端点、端点1(x1,y1)和端点2(x2,y2)这三个点所形成的夹角,然后绘制一段与夹角的两边相切并且半径为radius的圆上的弧线。弧线的起点就是当前端点所在边与圆的切点,弧线的终点就是端点2(x2,y2)所在边与圆的切点,并且绘制的弧线是两个切点之间长度最短的那个圆弧。
此外,如果当前端点不是弧线起点,arcTo()方法还将添加一条当前端点到弧线起点的直线线段。
渐变:
线性渐变 http://blog.csdn.net/tomorrow13210073213/article/details/42453769
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.rect(0, 0, canvas.width, canvas.height)
var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height)
grd.addColorStop(0, '#8ED6FF')
grd.addColorStop(1, '#004CB3')
context.fillStyle = grd
context.fill()
方法:createLinearGradient()
方法名:createLinearGradient()
方法描述:用于创建基于整个画布的线性渐变,该渐变可以用于填充路径或定义笔触(作为属性fillStyle或strokeStyle的值)
js语法:context.createLinearGradient(x0,y0,x1,y1);
参数:x0:渐变开始点的 x 坐标,
参数:y0:渐变开始点的 y 坐标,
参数:x1:渐变结束点的 x 坐标,
参数:y1:渐变结束点的 y 坐标
var cg = context.createLinearGradient(startpoint.x , startpoint.y , endingpoint.x, endingpoint.y)
径向渐变: http://blog.csdn.net/tomorrow13210073213/article/details/42486639
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.rect(0, 0, canvas.width, canvas.height)
var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300)
grd.addColorStop(0, '#8ED6FF')
grd.addColorStop(1, '#004CB3')
context.fillStyle = grd
context.fill()
方法:createRadialGradient()
方法名:createRadialGradient()
方法描述:用于创建基于整个画布的放射渐变,该渐变可以用于填充路径或定义笔触(作为属性fillStyle或strokeStyle的值)
js语法:context.createRadialGradient(x0,y0,r0,x1,y1,r1);
参数:x0:渐变的开始圆的 x 坐标,
参数:y0:渐变的开始圆的 y 坐标,
参数:r0:开始圆的半径,
参数:x1:渐变的结束圆的 x 坐标,
参数:y1:渐变的结束圆的 y 坐标,
参数:r1:结束圆的半径
pattern在指定的方向内重复指定的元素,被重复的元素可用于绘制/填充矩形、圆形或线条等等。
context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
//var imgObj = new Image();
//imgObj.src = url;
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;ctx.fill();
drawImage (宽高,裁剪)
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image()
imageObj.src = './darth-vader.jpg'
imageObj.onload = function() {
context.drawImage(imageObj, 69, 50)
}
JavaScript 语法 1
在画布上定位图像:
context.drawImage(img,x,y);
JavaScript 语法 2
在画布上定位图像,并规定图像的宽度和高度:
context.drawImage(img,x,y,width,height);
JavaScript 语法 3
剪切图像,并在画布上定位被剪切的部分:
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
参数值
参数 | 描述 |
---|---|
img | 规定要使用的图像、画布或视频。 |
sx | 可选。开始剪切的 x 坐标位置。 |
sy | 可选。开始剪切的 y 坐标位置。 |
swidth | 可选。被剪切图像的宽度。 |
sheight | 可选。被剪切图像的高度。 |
x | 在画布上放置图像的 x 坐标位置。 |
y | 在画布上放置图像的 y 坐标位置。 |
width | 可选。要使用的图像的宽度。(伸展或缩小图像) |
height | 可选。要使用的图像的高度。(伸展或缩小图像) |
书写文本
fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。
提示:请使用 font 属性来定义字体和字号,并使用 fillStyle 属性以另一种颜色/渐变来渲染文本。
JavaScript 语法:
context.fillText(text,x,y,maxWidth);
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var text = 'Hello World'
var x = canvas.width / 2
var y = canvas.height / 2
context.font = 'bold 20pt Calibri'
context.fillStyle = 'blue'
context.textAlign = 'center' // start end left right
context.textBaseline = 'middle' //top hanging alphabetic bottom
var metrics = context.measureText(text)
var width = metrics.width
参数值
参数 | 描述 |
---|---|
text | 规定在画布上输出的文本。 |
x | 开始绘制文本的 x 坐标位置(相对于画布)。 |
y | 开始绘制文本的 y 坐标位置(相对于画布)。 |
maxWidth | 可选。允许的最大文本宽度,以像素计。 |
合成:
context.translate(-1,-1) 镜像翻转