搜索
HTML5画布canvas目录•画布canvas介绍•Canvas绘图预备知识：canvas标签，Context，颜色，坐标•Canvas绘制基本图形：矩形，圆形，直线，曲线•Canvas中的渐变色：线性渐变，径向渐变一、画布canvas介绍•Canvas应用一、画布canvas介绍•canvas/canvas网页中绘制图形的容器，画布。•也可以用css控制canvas的大小，但是不会更改里面的坐标数值。•canvas元素本身是没有绘图能力的，所有的绘制工作必须用JavaScript完成。三、Canvas绘图预备知识•Canvas是画布，Context则相当于画笔。目前只支持“2d”，未来会有“3d”三、Canvas绘图预备知识•Canvas图形，一般来说分为填充、线条两部分。开始画之前，一般都要设置好填充和线条的样式。三、Canvas绘图预备知识•补充：Canvas中的颜色Canvas中的颜色跟css中颜色非常类似。色彩的更改，一定要在正式绘图之前。三、Canvas绘图预备知识•Canvas中的坐标三、Canvas绘制基本图形•矩形rectangle通过路径创建矩形直接画出矩形清除canvas已有的图形内容（只能是矩形的区域）矩形是canvas唯一支持直接画的形状。其他形状都必须通过一个或者多个路径来创建三、Canvas绘制基本图形•矩形rectangle直接画出矩形矩形左上角x，y，宽，高三、Canvas绘制基本图形•练习：在canvas上，用鼠标点哪里，哪里就出现一个10*10像素大小的矩形。三、Canvas绘制基本图形•补充：获取标签里的鼠标坐标事件对象event.offsetXevent.offsetY三、Canvas绘制基本图形•矩形rectangle通过路径创建矩形--canvas创建图形的基本方法。1、开始创建路径：ctx.beginPath();2、绘制图形路径：ctx.rect(100,100,200,200);3、关闭（封闭）路径：ctx.closePath();--非必须视情况而定4、设置填充样式或者线条样式（这一步只要放在5之前都行）5、绘制：填充或画线条ctx.fill()ctx.stroke()三、Canvas绘制基本图形•矩形rectangle三、Canvas绘制基本图形•矩形rectangleclearRect()一定要在绘制图形之后，才有效果。三、Canvas绘制基本图形•圆形、扇形arc弧默认顺时针画弧。圆的弧度是0到2*Math.PI三、Canvas绘制基本图形•圆形、扇形arc弧描边时，需注意closePath的先后。三、Canvas绘制基本图形•圆形、扇形arc弧填充时，closePath的先后没有关系。三、Canvas绘制基本图形•圆形、扇形arc弧怎么画出扇形？三、Canvas绘制基本图形•画圆练习1：根据指定的百分比数据，画出饼图。如：[30,30,40]三、Canvas绘制基本图形•画圆练习2：利用arc画出奥运5环三、Canvas绘制基本图形•直线line在x，y坐标起笔画到x，y坐标三、Canvas绘制基本图形•直线linelineCap值：butt/round/square平直圆形线帽正方形线帽lineJoin值：miter/round/bevel尖角圆角斜角三、Canvas绘制基本图形•直线line画多条，但不连续的直线三、Canvas绘制基本图形•直线line画多条直线，但不连续的直线--添加了closePath()三、Canvas绘制基本图形•直线line怎么画虚线？ctx.setLineDash([100,50]);线段、间距的长度ctx.setLineDash([0]);恢复为实线三、Canvas绘制基本图形•练习：根据指定数组，在canvas绘制表格。如[2,2],则绘制出2*2的表格。单元格宽高自拟。三、Canvas绘制基本图形•思考：模仿windows绘图板，做一个canvas绘图板，可以调整线条颜色，粗细等等。三、Canvas绘制基本图形•曲线三、Canvas绘制基本图形•曲线arcTo()如果我们想画一条弧线，需要提供3个坐标，开始点，控制点和结束点。•开始点一般可以通过moveTo()或者lineTo()提供•arcTo()提供控制点和结束点.arcTo(x1,y1,x2,y2,半径)三、Canvas绘制基本图形•曲线arcTo(x1,y1,x2,y2,半径)三、Canvas绘制基本图形•曲线练习：画一个圆角矩形，数据自拟，如下图所示：四、Canvas中的渐变色•Canvas中的渐变色分为：线性渐变径向渐变四、Canvas中的渐变色•线性渐变addColorStop接受两个参数：position：指定渐变中颜色所在的相对位置，0-1color：指定渐变中的颜色四、Canvas中的渐变色•径向渐变•这个方法接受六个参数：前三个参数描述一个圆（开始圆），后三个参数描述另一个圆（结束圆）。用于描述每个圆有三个参数，(x,y)表示圆心位置，r表示圆的半径径向渐变和线性渐变类似，同样需要通过addColorStop()来添加渐变颜色四、Canvas中的渐变色•径向渐变四、Canvas中的渐变色•练习：绘制一个渐变图形，如下所示：•THEEND