Canvas

来源：互联网发布：电信网络宽带编辑：程序博客网时间：2024/06/18 14:22

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

textAlign 与 textBaseline

参数值

参数描述text规定在画布上输出的文本。x开始绘制文本的 x 坐标位置（相对于画布）。y开始绘制文本的 y 坐标位置（相对于画布）。maxWidth可选。允许的最大文本宽度，以像素计。

合成：

context.translate(-1,-1) 镜像翻转

阅读全文

0 0