本文共 5874 字,大约阅读时间需要 19 分钟。
本人是个新手,写下博客用于自我复习、自我总结。 如有错误之处,请各位大佬指出。 学习资料来源于:尚硅谷
什么是canvas(画布) ?
<canvas>
是 HTML5 新增的元素,可用于通过使用JavaScript中的脚本来绘制图形,创建动画。我们可以使用<canvas>
标签来定义一个canvas元素。 使用<canvas>
标签时,建议要成对出现,不要使用闭合的形式。 在使用<canvas>
时,定义一些替代内容也是必要的。因为某些较老的浏览器(尤其是IE9之前的IE浏览器),不支持canvas。那可以预料到的是,在这些较老的浏览器上你应该要给用户展示些替代内容。比较好的点就是,这个替代内容,在支持<canvas>
的浏览器中将会忽略这部分内容,然后正常渲染canvas。不支持<canvas>
的浏览器才会显示替代内容。
canvas标签中只有两个属性:width和height。这些都是可选的。
当没有设置宽度和高度的时候,canvas会初始化width: 300px 和 height:150px。需要说明的是canvas的宽高:
如果是在html属性设置width height时,只影响画布本身不影画布内容 如果是在css属性设置width height时,不但会影响画布本身的高宽,还会使画布中的内容等比例缩放(缩放参照于画布默认的尺寸)<canvas>
元素只是创造了一个固定大小的画布,要想在它上面去绘制内容,我们需要找到它的渲染上下文。<canvas>
元素有一个叫做 getContext()
的方法,这个方法是用来获得渲染上下文和它的绘画功能。
getContext()
只有一个参数:上下文的格式
var canvas = document.getElementById('box');if (canvas.getContext){ var ctx = canvas.getContext('2d');}
相关代码:
元素canvas只支持一种原生的图形绘制:矩形。所有其他的图形的绘制都至少需要生成一条路径。
canvas提供了三种方法:
绘制一个填充的矩形(填充色默认为黑色)
fillRect(x, y, width, height)
绘制一个矩形的边框(默认边框为:一像素实心黑色)
strokeRect(x, y, width, height)
清除指定矩形区域,让清除部分完全透明。
clearRect(x, y, width, height)
x与y指定了在canvas画布上所绘制的矩形的左上角(相对于原点)的坐标。
width和height设置矩形的尺寸。 (存在边框的话,边框会在width上占据一个边框的宽度,height同理)canvas在渲染矩形边框时,需要注意:边框宽度是平均分在偏移位置的两侧的。
比如context.strokeRect(10,10,50,50)
,边框会渲染在10.5 和 9.5之间。但是浏览器不让一个像素只用自己的一半,相当于边框会渲染在9到11之间。 因此,context.strokeRect(10.5,10.5,50,50)
,边框才会渲染在10到11之间。 添加样式和颜色:
fillStyle
设置图形的填充颜色。
strokeStyle
设置图形轮廓的颜色。默认情况下,线条和填充颜色都是黑色。 lineWidth
这个属性设置当前绘线的粗细。属性值必须为正数, 0、 负数、 Infinity 和 NaN 会被忽略。它的默认值是1.0。 lineJoin
设定线条与线条间接合处的样式(默认是 miter) 图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。
步骤:
1. 首先,你需要创建路径起始点。 2. 然后你使用画图命令去画出路径 3. 之后你把路径封闭。 4. 一旦路径生成,你就能通过描边或填充路径区域来渲染图形。比如要绘制一个图形会涉及到如下方法:
beginPath()
生成路径的第一步叫做beginPath()。本质上,路径是由很多子路径构成,这些子路径都是在一个列表中,所有的子路径(线、弧形等等)构成图形。而每次这个方法调用之后,列表清空重置,然后我们就可以重新绘制新的图形。
moveTo(x, y)
lineTo(x, y)
stroke()
fill()
closePath()
closePath()
不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形已经闭合,即当前点为开始点,该函数就什么也不做。 除此以外,当你调用fill()
函数时,所有没有闭合的形状都会自动闭合,所以你也可以不去调用closePath()
函数。但是调用stroke()
时不会自动闭合
以三角形为例:
lineCap
是 Canvas 2D API 指定 如何绘制每一条线段末端的属性。
有3个可能的值,分别是:
butt
:线段末端以方形结束。 (默认值) round
:线段末端以圆形结束 square
:线段末端以方形结束,但是增加了一个宽度和线段相同,高度是线段厚度一半的矩形区域 save()
是 Canvas 2D API 通过将当前状态放入栈中,保存 canvas 全部状态的方法。
restore()
是 Canvas 2D API 通过在绘图状态栈中弹出顶端的状态,将 canvas 恢复到最近的保存状态的方法。
角度与弧度的js表达式 radians=(Math.PI/180)*degrees
canvas绘制圆形用到的方法:
arc(x, y, radius, startAngle, endAngle, anticlockwise)
画一个以(x,y)为圆心的以radius为半径的圆弧(圆),从startAngle开始到endAngle结束(startAngle以及endAngle参数用弧度定义。这些都是以x轴为基准),按照anticlockwise给定的方向(默认为顺时针)来生成。 ture: 逆时针 false:顺时针 arcTo(x1, y1, x2, y2, radius)
根据给定的控制点和半径画一段圆弧 二次贝塞尔
quadraticCurveTo(cp1x, cp1y, x, y)
绘制二次贝塞尔曲线,cp1x,cp1y为一个控制点,x,y为结束点。 起始点为moveto时指定的点 三次贝塞尔
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
绘制三次贝塞尔曲线,cp1x,cp1y为控制点一,cp2x,cp2y为控制点二,x,y为结束点。 起始点为moveto时指定的点 window.onload = function () { var canvas = test; if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(300, 0); ctx.lineTo(200, 200); ctx.stroke(); ctx.beginPath(); ctx.moveTo(50, 50) ctx.quadraticCurveTo(300, 0, 200, 200); ctx.stroke(); } }
window.onload = function () { var canvas = test; if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(300, 0); ctx.lineTo(0, 300); ctx.lineTo(300, 300); ctx.stroke(); ctx.beginPath(); ctx.moveTo(50, 50) ctx.bezierCurveTo(300, 0, 0, 300, 300, 300); ctx.stroke(); } }
canvas中的变换
translate(x, y)
它用来移动canvas的原点到一个不同的位置。 translate 方法接受两个参数。x 是左右偏移量,y 是上下偏移量, 在canvas中translate是累加的
window.onload = function () { var canvas = test; if (canvas.getContext) { var ctx = canvas.getContext("2d"); /*ctx.translate(50,50); ctx.translate(50,50);*/ ctx.translate(100, 100); ctx.beginPath(); ctx.fillRect(0, 0, 100, 100); } }
rotate(angle)
这个方法只接受一个参数:旋转的角度(angle),它是顺时针方向的,以弧度为单位的值。旋转的中心点始终是 canvas 的原点,如果要改变它,我们需要用到 translate 方法 在canvas中rotate也是累加的
window.onload = function () { var canvas = test; if (canvas.getContext) { var ctx = canvas.getContext("2d"); //ctx.translate(50,50); //ctx.rotate(45*Math.PI/180) ctx.rotate(22.1 * Math.PI / 180) ctx.rotate(22.9 * Math.PI / 180) ctx.beginPath(); ctx.fillRect(150, 150, 100, 100); } }
scale(x, y)
scale 方法接受两个参数。x,y 分别是横轴和纵轴的缩放因子,它们都必须是正值。 值比 1.0 小表示缩小,比 1.0 大则表示放大,值为 1.0 时什么效果都没有。 缩放一般我们用它来增减图形在 canvas 中的像素数目,对形状,位图进行缩小或者放大。 在canvas中scale是累乘的
window.onload = function () { var canvas = test; if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.scale(2, 2) ctx.scale(2, 2) /* css像素是一个抽象单位 放大: 使画布内css像素的个数变少,单个css像素所占据的实际物理尺寸变大 缩小: 使画布内css像素的个数变多,单个css像素所占据的实际物理尺寸变小 * */ ctx.beginPath(); ctx.fillRect(50, 50, 100, 100); } }
转载地址:http://xlyki.baihongyu.com/