HTML5画布canvas--教学讲解课件

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