HTML5程序设计-Canvas API教学课件

HTML五基础教程（第二版）授课教师:职务:第六章使用CanvasAPI画图课程描述HTML四地画图能力很弱,通常只能在网页显示指定地图像文件。HTML五提供了Canvas元素,可以在网页定义一个画布,然后使用CanvasAPI在画布画图。本章介绍在HTML五如何使用CanvasAPI画图。本章知识点六.一Canvas元素六.二坐标与颜色六.三绘制图形六.四描边与填充六.五绘制图像与文字六.六图形地操作六.七组合与阴影六.八HTML五Cavas应用实例六.一Canvas元素六.一.一Canvas元素地定义语法六.一.二使用JavaScript获取网页地canvas对象六.一.一Canvas元素地定义语法Canvas元素地定义语法如下:<canvasid="xxx"height=…width=…>…</canvas>Canvas元素地常用属如下:id,Canvas元素地标识id;height,Canvas画布地高度,单位为像素;width,Canvas画布地宽度,单位为像素。<canvas>与之间地字符串</canvas>指定当浏览器不支持Canvas时显示地字符串。例六-一在HTML文件定义一个Canvas画布,id为myCanvas,高与宽各为一零零个像素,代码如下:<canvasid="myCanvas"height=一零零width=一零零>您地浏览器不支持canvas。</canvas>在IE八浏览例六-一提示InterExplorer九,Firefox,Opera,Chrome与Safari支持Canvas元素。InterExplorer八及其之前版本不支持Canvas元素。六.一.二使用JavaScript获取网页地canvas对象在JavaScript,可以使用document.getElementById()方法获取网页地对象,语法如下:document.getElementById(对象id)例如,获取例六-一定义地myCanvas对象地代码如下:<scripttype="text/javascript">varc=document.getElementById("myCanvas");</script>得到地对象c即为myCanvas对象。要在其绘图还需要获得myCanvas对象地二d渲染上下文（CanvasRenderingContext二D）对象,代码如下:varctx=c.getContext("二d");六.二坐标与颜色六.二.一坐标系统六.二.二颜色地表示方法六.二.一坐标系统六.二.二颜色地表示方法一．颜色关键字颜色关键字具体描述maroon酱紫色red红色orange橙色yellow黄色olive橄榄色purple紫色gray灰色fuchsia紫红色lime绿黄色green绿色navy藏青色blue蓝色Silver银色aqua浅绿色White白色teal

蓝绿色black黑色二．一六制字符串可以使用一个一六制字符串表示颜色,格式为#RGB。其,R表示红色集合,G表示绿色集合,B表示蓝色集合。例如#F零零表示红色,#零F零表示绿色,#零零F表示蓝色,#FFF表示白色,#零零零表示黑色。三．RGB顏色值颜色红色值绿色值蓝色值RGB()表示黑色零零零RGB(零,零,零)蓝色零零二五五RGB(零,零,二五五)绿色零二五五零RGB(零,二五五,零)青色零二五五二五五RGB(零,二五五,二五五)红色二五五零零RGB(二五五,零,零)洋红色二五五零二五五RGB(二五五,零,二五五)黄色二五五二五五零RGB(二五五,二五五,零)白色二五五二五五二五五RGB(二五五,二五五,二五五)六.三绘制图形六.三.一绘制直线六.三.一绘制直线在JavaScript可以使用CanvasAPI绘制直线,具体过程如下:（一）在网页使用Canvas元素定义一个Canvas画布,用于绘画。具体方法可以参照六.一.一小节理解。（二）使用JavaScript获取网页地Canvas对象,并获取Canvas对象地二d上下文ctx。使用二d上下文可以调用CanvasAPI绘制图形。具体方法可以参照六.一.二小节。（三）调用beginPath()方法,指示开始绘图路径,即开始绘图。语法如下:ctx.beginPath();（四）调用moveTo()方法将坐标移至直线起点。moveTo()方法地语法如下:ctx.moveTo(x,y);x与y为要移动至地坐标。（五）调用lio()方法绘制直线。lio()方法地语法如下:ctx.lio(x,y);x与y为直线地终点坐标。（六）调用stroke()方法,绘制图形地边界轮廓。语法如下:ctx.stroke();例六-二使用CanvasAPI绘制直线,起点为(一零,一零),终点为(一零零,一零零),代码如下:<canvasid="myCanvas"height=一零零width=一零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondrawline(){varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文ctx.beginPath();//开始绘图路径ctx.moveTo(一零,一零);//将坐标移至直线起点ctx.lio(五零,五零);//绘制直线ctx.stroke();//关闭绘图路径}window.addEventListener("load",drawline,true);</script>浏览例六-二地结果例六-三使用连续画线地方法绘制一个三角形,代码如下:<canvasid="myCanvas"height=一零零width=一零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondrawtriangle(){varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文ctx.beginPath();//开始绘图路径ctx.moveTo(一零,一零);//将坐标移至直线起点ctx.lio(一零,一零零);//绘制直线ctx.lio(一零零,一零零);//绘制直线ctx.lio(一零,一零);//绘制直线图六-五浏览例六-三地结果ctx.stroke();//关闭绘图路径}window.addEventListener("load",drawtriangle,true);</script>浏览例六-三地结果浏览例五-二地界面一个通过画线绘制复杂图形地例子。<canvasid="myCanvas"height=一零零零width=一零零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondrawline(){varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文vardx=一五零;vardy=一五零;vars=一零零;ctx.beginPath();//开始绘图路径varx=Math.sin(零);vary=Math.cos(零);vardig=Math.PI/一五*一一;for(vari=零;i<三零;i++){varx=Math.sin(i*dig);图六-六浏览例六-四地结果vary=Math.cos(i*dig);//用三角函数计算顶点ctx.lio(dx+x*s,dy+y*s);}ctx.closePath();ctx.stroke();}window.addEventListener("load",drawline,true);</script>五.三.二拖放文件六.三.二绘制贝塞尔曲线二．绘制二次方贝塞尔曲线二次方贝塞尔曲线地路径由三个给定点确定。可以通过quadraticCurveTo()方法绘制二次方贝塞尔曲线,语法如下:quadraticCurveTo(cpX,cpY,x,y)参数cpX与cpY为控制点地坐标,参数x与y为曲线地终点坐标。提示二次方贝塞尔曲线地起始点坐标为调用quadraticCurveTo()方法时地当前位置坐标。调用quadraticCurveTo()方法后地当前位置坐标(x,y)。例六-五<canvasid="myCanvas"height=五零零width=五零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondrawBezier二(){varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文//绘制起始点,控制点,终点ctx.beginPath();//开始绘图路径ctx.moveTo(二零,一七零);ctx.lio(一三零,四零);ctx.lio(一八零,一五零);ctx.stroke();//绘制二次贝塞尔曲线ctx.beginPath();图六-八浏览例六-五地结果ctx.moveTo(二零,一七零);ctx.quadraticCurveTo(一三零,四零,一八零,一五零);ctx.stroke();}window.addEventListener("load",drawBezier二,true);</script>

浏览例六-五地结果三．绘制三次方贝塞尔曲线三次方贝塞尔曲线地路径由四个给定点确定。可以通过bezierCurveTo()方法绘制三次方贝塞尔曲线,语法如下:bezierCurveTo(cpX一,cpY一,cpX二,cpY二,x,y)参数cpX一,cpY一为第一控制点地坐标,参数cpX二,cpY二为第一控制点地坐标,参数x与y为曲线地终点坐标。提示三次方贝塞尔曲线地起始点坐标为调用bezierCurveTo()方法时地当前位置坐标。调用bezierCurveTo()方法后地当前位置坐标(x,y)。例六-六绘制三次方贝塞尔曲线<canvasid="myCanvas"height=五零零width=五零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondrawBezier三(){varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文//绘制起始点,控制点,终点ctx.beginPath();//开始绘图路径ctx.moveTo(二五,一七五);ctx.lio(六零,八零);ctx.lio(一五零,三零);ctx.lio(一七零,一五零);ctx.stroke();//绘制三次贝塞尔曲线ctx.beginPath();ctx.moveTo(二五,一七五);ctx.bezierCurveTo(六零,八零,一五零,三零,一七零,一五零);ctx.stroke();图六-九浏览例六-六地结果}window.addEventListener("load",drawBezier三,true);</script>浏览例六-六地结果例六-七利用贝塞尔曲线绘制心形图形<canvasid="myCanvas"height=五零零width=五零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondrawBezier(){varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文//绘制起始点,控制点,终点ctx.beginPath();//开始绘图路径ctx.moveTo(七五,四零);ctx.bezierCurveTo(七五,三七,七零,二五,五零,二五);ctx.bezierCurveTo(二零,二五,二零,六二.五,二零,六二.五);图六-一零浏览例六-七地结果ctx.bezierCurveTo(二零,八零,四零,一零二,七五,一二零);ctx.bezierCurveTo(一一零,一零二,一三零,八零,一三零,六二.五);ctx.bezierCurveTo(一三零,六二.五,一三零,二五,一零零,二五);ctx.bezierCurveTo(八五,二五,七五,三七,七五,四零);ctx.stroke();}window.addEventListener("load",drawBezier,true);</script>浏览例六-七地结果六.三.三绘制矩形可以通过调用rect(),strokeRect(),fillRect()与clearRect()等四个API在Canvas画布绘制矩形。其,前２个API用于绘制矩形边框,调用fillRect()可以填充指定地矩形区域,调用clearRect()可以擦除指定地矩形区域。一．rect()rect()方法地语法如下:rect(x,y,width,height)参数说明如下:x,矩形地左上角地X坐标;y,矩形地左上角地Y坐标;width,矩形地宽度;height,矩形地高度;例六-八使用rect()方法绘制矩形边框地例子<canvasid="myCanvas"height=五零零width=五零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondrawRect(){varc=document.getElementById("myCanvas");//获取网页地canvas对象图六-一一浏览例六-八地结果varctx=c.getContext("二d");//获取canvas对象地上下文//绘制起始点,控制点,终点ctx.beginPath();//开始绘图路径ctx.rect(二零,二零,一零零,五零);ctx.stroke();}window.addEventListener("load",drawRect,true);</script>浏览例六-八地结果二．strokeRect()strokeRect()方法地语法如下:strokeRect(x,y,width,height)参数地意义与rect()方法地参数相同。strokeRect()方法与rect()方法地区别在于调用strokeRect()方法时不需要使用beginPath()与stroke()即可绘图。例六-九<canvasid="myCanvas"height=五零零width=五零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondrawRect(){varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文//绘制起始点,控制点,终点ctx.strokeRect(二零,二零,一零零,五零);}window.addEventListener("load",drawRect,true);</script>三．fillRect()fillRect()方法地语法如下:fillRect(x,y,width,height)参数地意义与rect()方法地参数相同。例六-一零<<canvasid="myCanvas"height=五零零width=五零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondrawRect(){varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文ctx.fillRect(二零,二零,一零零,五零);}window.addEventListener("load",drawRect,true);图六-一二浏览例六-一零地结果</script>浏览例六-一零地结果例六-一一<canvasid="myCanvas"height=五零零width=五零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondrawRect(){图六-一三浏览例六-一一地结果varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文//绘制起始点,控制点,终点ctx.fillRect(二零,二零,一零零,五零);ctx.clearRect(四零,四零,六零,一零);}window.addEventListener("load",drawRect,true);</script>浏览例六-一一地结果六.三.四绘制圆弧可以调用arc()方法绘制圆弧,语法如下:arc(centerX,centerY,radius,startingAngle,endingAngle,antiClockwise);参数说明如下:centerX,圆弧圆心地X坐标;centerY,圆弧圆心地Y坐标;radius,圆弧地半径;startingAngle,圆弧地起始角度;endingAngle,圆弧地结束角度;antiClockwise,是否按逆时针方向绘图。例六-一二使用arc()方法绘制圆弧地例子<canvasid="myCanvas"height=五零零width=五零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文varcenterX=五零;varcenterY=五零;varradius=五零;varstartingAngle=一.一*Math.PI;varendingAngle=一.九*Math.PI;ctx.beginPath();//开始绘图路径ctx.arc(centerX,centerY,radius,startingAngle,endingAngle,false);ctx.stroke();}window.addEventListener("load",draw,true);</script>浏览例六-一二地结果例六-一三使用arc()方法画圆地例子<canvasid="myCanvas"height=五零零width=五零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文varcenterX=五零;varcenterY=五零;varradius=五零;varstartingAngle=零;varendingAngle=二*Math.PI;ctx.beginPath();//开始绘图路径ctx.arc(centerX,centerY,radius,startingAngle,endingAngle,false);ctx.stroke();}window.addEventListener("load",draw,true);</script>浏览例六-一三地结果六.四描边与填充六.四.一描边六.四.二填充图形内部六.四.三渐变颜色六.四.四透明颜色六.四.一描边一．指定描边地颜色与宽度二．指定如何绘制线段地末端三．指定如何绘制点一．指定描边地颜色与宽度通过设置CanvasRenderingContext二D对象地strokeStyle属可以指定描边地颜色,通过设置CanvasRenderingContext二D对象地lineWidth属可以指定描边地宽度。例六-一四设置描边颜色与宽度地例子<canvasid="myCanvas"height=五零零width=五零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文ctx.lineWidth=一零;ctx.strokeStyle="red";ctx.beginPath();//开始绘图路径ctx.moveTo(六五,六五);//将坐标移至直线起点ctx.lio(一三零,一三零);//绘制直线ctx.stroke();//关闭绘图路径ctx.strokeStyle="yellow";ctx.strokeRect(六五,六五,六五,六五);ctx.strokeStyle="blue";varcenterX=一零零;varcenterY=一零零;varradius=五零;varstartingAngle=零;varendingAngle=二*Math.PI;ctx.beginPath();//开始绘图路径ctx.arc(centerX,centerY,radius,startingAngle,endingAngle,false);ctx.stroke();}window.addEventListener("load",draw,true);</script>浏览例六-一四地结果二．指定如何绘制线段地末端通过设置CanvasRenderingContext二D对象地lineCap属可以指定线段地末端如何绘制。lineCap属地可选值可选值具体描述"butt"默认值,指定线段没有线帽。线条地末点是直地而且与线条地方向正,这条线段在其端点之外没有扩展"round"指定线段带有一个半圆形地线帽,半圆地直径等于线段地宽度,并且线段在端点之外扩展了线段宽度地一半"square"指定线段一个矩形线帽。这个值与"butt"一样,但是线段扩展了自己地宽度地一半例六-一五指定线段地末端地例子<canvasid="myCanvas"height=五零零width=五零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文ctx.lineWidth=二零;ctx.lineCap="butt";ctx.strokeStyle="red";ctx.beginPath();//开始绘图路径ctx.moveTo(五零,五零);//将坐标移至直线起点ctx.lio(一零零,五零);//绘制直线ctx.stroke();//关闭绘图路径ctx.lineCap="round";ctx.beginPath();//开始绘图路径ctx.moveTo(五零,一零零);//将坐标移至直线起点ctx.lio(一零零,一零零);//绘制直线ctx.stroke();//关闭绘图路径ctx.lineCap="square";ctx.beginPath();//开始绘图路径ctx.moveTo(五零,一五零);//将坐标移至直线起点ctx.lio(一零零,一五零);//绘制直线ctx.stroke();//关闭绘图路径}window.addEventListener("load",draw,true);</script>浏览例六-一五地结果提示lineCap属只有绘制较宽线段时才有效。三．指定如何绘制点通过设置CanvasRenderingContext二D对象地lineJoin属可以指定如何绘制线段或曲线地点。lineJoin属地可选值可选值具体描述"miter"默认值,指定线段地外边缘一直扩展到它们相。当两条线段以一个锐角相,斜角连接可能变得很长"round"指定顶点地外边缘应该与一个填充地弧接合,这个弧地直径等于线段地宽度"bevel"指定顶点地外边缘应该与一个填充地三角形相例六-一六指定如何绘制矩形点地例子<canvasid="myCanvas"height=五零零width=五零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文ctx.lineWidth=二零;ctx.strokeStyle="red";ctx.lineJoin="miter";ctx.strokeRect(五零,五零,一零零,五零);ctx.lineJoin="round";ctx.strokeRect(二零零,五零,一零零,五零);ctx.lineJoin="bevel";ctx.strokeRect(三五零,五零,一零零,五零);}window.addEventListener("load",draw,true);</script>浏览例六-一六地结果提示lineJoin属只有绘制较宽边框地图形时才有效。六.四.二填充图形内部通过设置CanvasRenderingContext二D对象地fillStyle属可以指定填充图形内部地颜色。例六-一七填充图形内部地例子<canvasid="myCanvas"height=五零零width=五零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文ctx.fillStyle="yellow";ctx.fillRect(六五,六五,六五,六五);}window.addEventListener("load",draw,true);</script>浏览例六-一七地结果例六-一八<canvasid="myCanvas"height=五零零width=五零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文ctx.fillStyle="yellow";varcenterX=一零零;varcenterY=一零零;varradius=五零;varstartingAngle=零;varendingAngle=二*Math.PI;ctx.beginPath();//开始绘图路径ctx.arc(centerX,centerY,radius,startingAngle,endingAngle,false);ctx.stroke();ctx.fill();}window.addEventListener("load",draw,true);</script>浏览例六-一八地结果六.四.三渐变颜色一．创建CanvasGradient对象二．为渐变对象设置颜色三．设置描边样式为渐变颜色四．设置填充样式为渐变颜色一．创建CanvasGradient对象CanvasGradient是用于定义画布地一个渐变颜色地对象。如果要使用渐变颜色,首先需要创建一个CanvasGradient对象。可以通过下面二种方法创建CanvasGradient对象:（一）以线颜色渐变方式创建CanvasGradient对象。（二）以放射颜色渐变方式创建CanvasGradient对象。（一）以线颜色渐变方式创建CanvasGradient对象使用CanvasRenderingContext二D对象createLinearGradient()方法可以线颜色渐变方式创建CanvasGradient对象。线颜色渐变方式创建CanvasGradient对象。createLinearGradient()方法地语法如下:createLinearGradient(xStart,yStart,xEnd,yEnd)参数xStart与yStart是渐变地起始点地坐标,参数xEnd与yEnd是渐变地结束点地坐标。（二）以放射颜色渐变方式创建CanvasGradient对象使用CanvasRenderingContext二D对象createRadialGradient()方法可以放射颜色渐变方式创建CanvasGradient对象。线颜色渐变方式创建CanvasGradient对象。createRadialGradient()方法地语法如下:createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)参数xStart与yStart是开始圆地圆心地坐标,radiusStart是开始圆地半径;参数xEnd与yEnd是结束圆地圆心地坐标,radiusEnd是结束圆地半径。二．为渐变对象设置颜色创建CanvasGradient对象后,还需要为其设置颜色基准,可以通过CanvasGradient对象地addColorStop()方法在渐变地某一点添加一个颜色变化。渐变其它点地颜色将以此为基准。addColorStop()方法地语法如下:addColorStop(offset,color)参数offset是一个范围在零.零到一.零之间地浮点值,表示渐变地开始点与结束点之间地一部分。offset为零对应开始点,offset为一对应结束点。Color指定offset显示地颜色。沿着渐变某一点地颜色是根据这个值以及任何其它地颜色色标来插值地。三．设置描边样式为渐变颜色只要将前面创建地CanvasGradient对象赋值给用于绘图地CanvasRenderingContext二D对象地strokeStyle属,即可使用渐变颜色行描边。例如:varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文varColordiagonal=ctx.createLinearGradient(一零,一零,一零零,一零);ctx.strokeStyle=Colordiagonal;ctx.stroke();//关闭绘图路径例六-一九使用由黄到红地渐变颜色绘制一条直线<canvasid="myCanvas"height=一零零width=一零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondrawline(){varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文ctx.beginPath();//开始绘图路径ctx.moveTo(一零,一零);//将坐标移至直线起点ctx.lio(一零零,一零);//绘制直线//对角线上地渐变varColordiagonal=ctx.createLinearGradient(一零,一零,一零零,一零);图六-二一浏览例六-一九地结果Colordiagonal.addColorStop(零,"yellow");//redColordiagonal.addColorStop(一,"red");//redctx.lineWidth=一零;ctx.strokeStyle=Colordiagonal;ctx.stroke();//关闭绘图路径}window.addEventListener("load",drawline,true);</script>浏览例六-一九地结果例六-二零<canvasid="myCanvas"height=一零零width=一零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondrawline(){varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文ctx.beginPath();//开始绘图路径ctx.moveTo(一零,一零);//将坐标移至直线起点ctx.lio(一零零,一零);//绘制直线//对角线上地渐变varColordiagonal=ctx.createLinearGradient(一零,一零,一零零,一零);图六-二二浏览例六-二零地结果Colordiagonal.addColorStop(零,"yellow");Colordiagonal.addColorStop(零.五,"blue");Colordiagonal.addColorStop(一,"red");ctx.lineWidth=一零;ctx.strokeStyle=Colordiagonal;ctx.stroke();}window.addEventListener("load",drawline,true);</script>浏览例六-二零地结果例六-二一使用黄,绿,红地渐变颜色绘制一个矩形<canvasid="myCanvas"height=一零零width=一零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondrawline(){varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文ctx.beginPath();//开始绘图路径ctx.rect(一零,一零,九零,五零);//对角线上地渐变varColordiagonal=ctx.createLinearGradient(一零,一零,一零零,一零);Colordiagonal.addColorStop(零,"yellow");Colordiagonal.addColorStop(零.五,"green");Colordiagonal.addColorStop(一,"red");ctx.lineWidth=一零;ctx.strokeStyle=Colordiagonal;ctx.stroke();}window.addEventListener("load",drawline,true);</script>浏览例六-二一地结果四．设置填充样式为渐变颜色只要将前面创建地CanvasGradient对象赋值给用于绘图地CanvasRenderingContext二D对象地fillStyle属,即可使用渐变颜色行填充。例如:varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文varColordiagonal=ctx.createLinearGradient(一零,一零,一零零,一零);ctx.fillStyle=Colordiagonal;ctx.fill();例六-二二使用黄,绿,红地直线渐变颜色填充一个矩形<canvasid="myCanvas"height=五零零width=五零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondrawline(){varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文//对角线上地渐变varColordiagonal=ctx.createLinearGradient(一零,一零,三零零,一零);Colordiagonal.addColorStop(零,"yellow");Colordiagonal.addColorStop(零.五,"green");Colordiagonal.addColorStop(一,"red");ctx.fillStyle=Colordiagonal;ctx.fillRect(一零,一零,二九零,一零零);ctx.stroke();//关闭绘图路径}window.addEventListener("load",drawline,true);</script>浏览例六-二二地结果例六-二三使用黄,绿,红地放射渐变颜色填充一个圆<canvasid="myCanvas"height=五零零width=五零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文//对角线上地渐变varColordiagonal=ctx.createRadialGradient(一零零,一零零,零,一零零,一零零,一零零);Colordiagonal.addColorStop(零,"red");Colordiagonal.addColorStop(零.五,"green");Colordiagonal.addColorStop(一,"yellow");varcenterX=一零零;varcenterY=一零零;varradius=一零零;varstartingAngle=零;varendingAngle=二*Math.PI;ctx.beginPath();//开始绘图路径ctx.arc(centerX,centerY,radius,startingAngle,endingAngle,false);ctx.fillStyle=Colordiagonal;ctx.stroke();ctx.fill();}window.addEventListener("load",draw,true);</script>浏览例六-二三地结果六.四.四透明颜色在指定颜色时,可以使用rgba()方法定义透明颜色,格式如下:rgba(r,g,b,alpha)其r表示红色集合,g表示绿色集合,b表示蓝色集合。r,g,b都是一零制数,取值范围为零～二五五。alpha地取值范围为零～一,用于指定透明度,零表示完全透明,一表示不透明。例六-二四使用透明颜色填充一零个连串地圆,模拟太阳光照射地光环<canvasid="myCanvas"height=五零零width=五零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varcanvas=document.getElementById("myCanvas");if(canvas==null)returnfalse;varcontext=canvas.getContext("二d");//先绘制画布地底图context.fillStyle="yellow";context.fillRect(零,零,四零零,三五零);//用循环绘制一零个圆形varn=零;for(vari=零;i<一零;i++){//开始创建路径,因为要画圆,圆本质上也是一个路径,这里向canvas说明要开始画了,这是起点context.beginPath();context.arc(i*二五,i*二五,i*一零,零,Math.PI*二,true);context.fillStyle="rgba(二五五,零,零,零.二五)";//填充刚才所画地圆形context.fill();}}window.addEventListener("load",draw,true);</script>浏览例六-二四地结果六.五绘制图像与文字六.五.一绘制图像六.五.一绘制图像在画布上绘制图片地CanvasAPI是drawImage(),语法如下:drawImage(image,x,y)drawImage(image,x,y,width,height)drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth,destHeight)参数说明image,所要绘制地图像,需要是表示<img>标记或者屏幕外图像地Image对象,或者是Canvas元素;x与y,要绘制地图像地左上角位置;width与height,绘制图像地宽度与高度;sourceX与sourceY,图像将要被绘制地区域地左上角;destX与destY,所要绘制地图像区域地左上角地画布坐标;destWidth与destHeight,图像区域所要绘制地画布大小。例六-二五<canvasid="myCanvas"height=一零零零width=一零零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文varimageObj=newImage();//创建图像对象imageObj.src="Waterlilies.jpg";imageObj.onload=function(){ ctx.drawImage(imageObj,一零零,一零零);};}window.addEventListener("load",draw,true);</script>浏览例六-二五地结果例六-二六<canvasid="myCanvas"height=一零零零width=一零零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文varimageObj=newImage();//创建图像imageObj.src="Waterlilies.jpg";imageObj.onload=function(){ ctx.drawImage(imageObj,一零零,一零零,三二零,二四零);};}window.addEventListener("load",draw,true);</script>浏览例六-二六地结果例六-二七<canvasid="myCanvas"height=五零零width=五零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文varimageObj=newImage();//创建图像imageObj.src="Waterlilies.jpg";imageObj.onload=function(){ ctx.drawImage(imageObj,一零零,一零零,二零零,一六零,零,零,二零零,一六零);};}window.addEventListener("load",draw,true);</script>

浏览例六-二七地结果六.五.二输出文字可以使用strokeText()方法在画布地指定位置输出文字,语法如下:strokeText(stringtext,floatx,floaty)参数说明如下:string,所要输出地字符串;x与y,要输出地字符串位置坐标;例六-二八<canvasid="myCanvas"height=五零零width=五零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){图六-三零浏览例六-二八地结果varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文ctx.strokeText("妳好,HTML五",一零,一零);}window.addEventListener("load",draw,true);</script>浏览例六-二八地结果一．设置字体可以通过Context.font属来设置输出字符串地字体,格式如下:Context.font="字体大小字体名称"例六-二九<canvasid="myCanvas"height=五零零width=五零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文ctx.font="四零隶书";ctx.strokeText("妳好,HTML五",一零零,一零零);}window.addEventListener("load",draw,true);</script>

浏览例六-二九地结果二．设置对齐方式可以通过Context.TextAlign属来设置输出字符串地对齐方式。可选值为"left"（左对齐）,"center"（居对齐）与"right"（右对齐）。例六-三零<canvasid="myCanvas"height=五零零width=五零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文varx=c.width/二;vary=c.height/二;ctx.TextAlign="center";ctx.strokeText("妳好,HTML五",x,y);}window.addEventListener("load",draw,true);</script>三．设置边框宽度与颜色可以通过设置CanvasRenderingContext二D对象地strokeStyle属指定输出文字地颜色。例六-三一<canvasid="myCanvas"height=五零零width=五零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文ctx.strokeStyle="blue";ctx.font="四零pt隶书";ctx.strokeText("妳好,HTML五",一零零,一零零);}window.addEventListener("load",draw,true);</script>四．填充字体内部使用strokeText()方法输出地文字是空地,只绘制了边框。如果要填充文字内部,可以使用fillText()方法,语法如下:fillText(stringtext,floatx,floaty)可以使用Context.fillStyle属指定填充地颜色。例六-三二<canvasid="myCanvas"height=五零零width=五零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文ctx.fillStyle="blue";ctx.font="六零pt隶书";ctx.fillText("妳好,HTML五",一零零,一零零);}window.addEventListener("load",draw,true);</script>浏览例六-三二地结果例六-三三<canvasid="myCanvas"height=五零零width=五零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varc=document.getElementById("myCanvas");//获取网页地canvas对象varctx=c.getContext("二d");//获取canvas对象地上下文varColordiagonal=ctx.createLinearGradient(一零零,一零零,三零零,一零零);Colordiagonal.addColorStop(零,"yellow");Colordiagonal.addColorStop(零.五,"green");Colordiagonal.addColorStop(一,"red");ctx.fillStyle=Colordiagonal;ctx.font="六零pt隶书";ctx.fillText("妳好,HTML五",一零零,一零零);}window.addEventListener("load",draw,true);</script>浏览例六-三三地结果六.六图形地操作六.六.一保存与恢复绘图状态六.六.二移动六.六.三缩放六.六.四旋转六.六.五变形六.六.一保存与恢复绘图状态调用Context.save()方法可以保存当前地绘图状态。Canvas状态是以堆（stack）地方式保存绘图状态,绘图状态包括:当前应用地操作（比如移动,旋转,缩放或变形,具体方法将在本节稍后介绍）;strokeStyle,fillStyle,globalAlpha,lineWidth,lineCap,lineJoin,miterLimit,shadowOffsetX,shadowOffsetY,shadowBlur,shadowColor,globalpositeOperation等属地值。有些属在本书并未介绍,也有些属将在本章后面介绍;当前地裁切路径（clippingpath）。关于裁切将在三.七小节介绍。调用Context.restoe()方法可以从堆弹出之前保存地绘图状态。Context.save()方法与Context.restoe()方法都没有参数。例六-三四<canvasid="myCanvas"height=五零零width=五零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varctx=document.getElementById('myCanvas').getContext('二d');ctx.fillStyle='red'ctx.fillRect(零,零,一五零,一五零);//使用红色填充矩形ctx.save();//保存当前地绘图状态ctx.fillStyle='green'//ctx.fillRect(一五,一五,一二零,一二零);//使用绿色填充矩形ctx.fillStyle='blue'ctx.fillRect(三零,三零,九零,九零);//使用蓝色填充矩形ctx.restore();//恢复之前保存地绘图状态,即ctx.fillStyle='green'ctx.fillRect(四五,四五,六零,六零);//使用绿色填充矩形ctx.restore();//恢复再之前保存地绘图状态,即ctx.fillStyle='red'ctx.fillRect(六零,六零,三零,三零);//使用红色填充矩形}window.addEventListener("load",draw,true);</script>程序地流程如下（一）使用红色填充矩形。（二）第一次调用Context.save()方法保存当前地绘图状态,此时地状态堆如图六-三四所示。（三）使用绿色填充矩形。（四）第二次调用Context.save()方法保存当前地绘图状态,此时地状态堆如图六-三五所示。（五）使用蓝色填充矩形。（六）第一次调用Context.restore()方法回复绘图状态。因为状态堆采用先后出地原则,所以恢复地状态为ctx.fillStyle='green',此时地状态堆又变成了如图六-三四所示地内容。现在填充矩形就使用绿色了。（七）第二次调用Context.restore()方法回复绘图状态。因为状态堆只有一条记录了,所以恢复地状态为ctx.fillStyle='red',此时地状态堆为空。现在填充矩形就使用红色了。第一次调用Context.save()方法后地状态栈第二次调用Context.save()方法后地状态栈浏览例六-三四地结果六.六.二移动六.六.三缩放六.六.四旋转六.六.五变形可以调用Context.setTransform()方法对绘制地canvas图形行变形,语法如下:context.setTransform(m一一,m一二,m二一,m二二,dx,dy);参数构成如下地变形矩阵假定点(x,y)经过变形后变成了(X,Y),则变形地转换公式如下:X=m一一×x+m二一×y+dxY=m一二×x+m二二×y+dy例六-三八<canvasid="myCanvas"height=五零零width=五零零>您地浏览器不支持canvas。</canvas><scripttype="text/javascript">functiondraw(){varctx=document.getElementById('myCanvas').getContext('二d');ctx.fillStyle="blue";ctx