HTML5 程序设计第6章

6.2 坐标与颜色
6.2.1 6.2.2 坐标系统 颜色的表示方法
6.2.1 坐标系统
6.2.2 颜色的表示方法
1．颜色关键字
颜色关键字 maroon red orange 具 体 描述 酱紫色 红色 橙色
yellow
olive purple gray fuchsia lime green navy blue
提示
3次方贝塞尔曲线的起始点坐标为调用 bezierCurveTo()方法时的当前位置坐标 。调用bezierCurveTo()方法后的当前位 置坐标(x,y)。
【例6-6】 绘制3次方贝塞尔曲线
<canvas id="myCanvas" height=500 width=500>您的浏览器不支持 canvas。 </canvas> <script type="text/javascript"> function drawBezier3() { var c=document.getElementById("myCanvas"); // 获取网页中的canvas对象 var ctx=c.getContext("2d"); //获取canvas对象的上下文 //绘制起始点、控制点、终点 ctx.beginPath(); // 开始绘图路径 ctx.moveTo(25,175); ctx.lineTo(60,80); ctx.lineTo(150,30); ctx.lineTo(170,150); ctx.stroke(); //绘制3次贝塞尔曲线 ctx.beginPath(); ctx.moveTo(25,175); ctx.bezierCurveTo(60,80,150,30,170,150); ctx.stroke();图6-9 浏览【例6-6】的结果 } window.addEventListener("load", drawBezier3, true); </script>
3．RGB 顏色值
颜色 黑色 蓝色 绿色 青色 红色 洋红色 黄色 0 0 0 0 255 255 255 红色值 绿色值 0 0 255 255 0 0 255 0 255 0 255 0 255 0 蓝色值 RGB()表示 RGB(0,0,0) RGB(0,0,255ຫໍສະໝຸດ Baidu RGB(0,255,0) RGB(0,255,255) RGB(255,0,0) RGB(255,0,255) RGB(255,255,0)
HTML5基础教程
授课教师： 职务：
第6章 使用Canvas API画图
课程描述
HTML4的画图能力很 弱，通常只能在网 页中显示指定的图 像文件。HTML5提供 了Canvas元素，可 以在网页中定义一 个画布，然后使用 Canvas API在画布 中画图。本章介绍 在HTML5中如何使用 Canvas API画图。
6.1.1 Canvas元素的定义语法
Canvas元素的定义语法如下： <canvas id="xxx" height=… width=…>…</canvas> Canvas元素的常用属性如下： id，Canvas元素的标识id； height，Canvas画布的高度，单位为像素； width，Canvas画布的宽度，单位为像素。 <canvas>和之间的字符串</canvas>指定当浏览 器不支持Canvas时显示的字符串。
提示
二次方贝塞尔曲线的起始点坐标为调用 quadraticCurveTo()方法时的当前位置坐标 。调用quadraticCurveTo()方法后的当前位 置坐标(x,y)。
【例6-5】
<canvas id="myCanvas" height=500 width=500>您的浏览器不支持 canvas 。</canvas> <script type="text/javascript"> function drawBezier2() { var c=document.getElementById("myCanvas"); // 获取网页中的canvas对 象 var ctx=c.getContext("2d"); //获取canvas对象的上下文 //绘制起始点、控制点、终点 ctx.beginPath(); // 开始绘图路径 ctx.moveTo(20,170); ctx.lineTo(130,40); ctx.lineTo(180,150); ctx.stroke(); //绘制2次贝塞尔曲线 ctx.beginPath();图6-8 浏览【例6-5】的结果 ctx.moveTo(20,170); ctx.quadraticCurveTo(130,40,180,150); ctx.stroke(); } window.addEventListener("load", drawBezier2, true); </script>
【例6-2】
使用Canvas API绘制直线，起点为(10, 10)，终点为(100, 100)，代码 如下： <canvas id="myCanvas" height=100 width=100>您的浏 览器不支持 canvas。</canvas> <script type="text/javascript"> function drawline() { var c=document.getElementById("myCanvas"); // 获取 网页中的canvas对象 var ctx=c.getContext("2d"); //获取canvas对象的上下文 ctx.beginPath(); // 开始绘图路径 ctx.moveTo(10,10); // 将坐标移至直线起点 ctx.lineTo(50,50); // 绘制直线 ctx.stroke(); // 关闭绘图路径 } window.addEventListener("load", drawline, true); </script>
黄色
橄榄色 紫色 灰色 紫红色 绿黄色 绿色 藏青色 蓝色
Silver
aqua White teal black
银色
浅绿色 白色 蓝绿色 黑色
2．16进制字符串
可 以 使 用 一 个 16 进 制 字 符 串 表 示 颜 色 ， 格 式 为 #RGB。其中，R表示红色集合，G表示绿色集合， B表示蓝色集合。例如#F00表示红色，#0F0表示 绿色，#00F表示蓝色，#FFF表示白色，#000表 示黑色。
5.3.2 拖放文件
6.3.2 绘制贝塞尔曲线
2．绘制二次方贝塞尔曲线
二次方贝塞尔曲线的路径由3个给定点确定。 可以通过quadraticCurveTo()方法绘制二次方 贝塞尔曲线，语法如下： quadraticCurveTo(cpX, cpY, x, y) 参数cpX和cpY为控制点的坐标，参数x和y为曲 线的终点坐标。
本章知识点
6.1 6.2 6.3 6.4 6.5 6.6 6.7 6.8 Canvas元素 坐标与颜色 绘制图形 描边和填充 绘制图像与文字 图形的操作 组合和阴影 HTML5 Cavas应用实例
6.1 Canvas元素
6.1.1 Canvas元素的定义语法 6.1.2 使用 JavaScript 获取网页中的 canvas对象
白色
255
255
255
RGB(255,255,255)
6.3 绘制图形
6.3.1 绘制直线
6.3.1 绘制直线
在JavaScript中可以使用Canvas API绘制直线，具体过程如下： （1）在网页中使用Canvas元素定义一个Canvas画布，用于绘画。具体 方法可以参照6.1.1小节理解。 （2）使用JavaScript获取网页中的Canvas对象，并获取Canvas对象的 2d上下文ctx。使用2d上下文可以调用Canvas API绘制图形。具 体方法可以参照6.1.2小节。 （3）调用beginPath()方法，指示开始绘图路径，即开始绘图。语法 如下： ctx.beginPath(); （4）调用moveTo()方法将坐标移至直线起点。moveTo()方法的语法如 下： ctx.moveTo(x，y); x和y为要移动至的坐标。 （5）调用lineTo()方法绘制直线。lineTo()方法的语法如下： ctx.lineTo(x，y); x和y为直线的终点坐标。 （6）调用stroke()方法，绘制图形的边界轮廓。语法如下： ctx. stroke();
【例6-1】
在HTML文件中定义一个Canvas画布，id 为myCanvas，高和宽各为100个像素，代 码如下： <canvas id="myCanvas" height=100 width=100> 您的浏览器不支持 canvas。 </canvas>
在IE8中浏览【例6-1】
提示
Internet Explorer 9、Firefox、Opera、 Chrome和Safari支持 Canvas元素。 Internet Explorer 8及其之前版本不支 持 Canvas元素。
浏览【例6-5】的结果
3．绘制3次方贝塞尔曲线
3次方贝塞尔曲线的路径由4个给定点确 定。可以通过bezierCurveTo()方法绘制 3次方贝塞尔曲线，语法如下： bezierCurveTo(cpX1, cpY1, cpX2, cpY2, x, y) 参数cpX1、cpY1为第1控制点的坐标，参数 cpX2、cpY2为第1控制点的坐标，参数x 和y为曲线的终点坐标。
6.1.2 使用JavaScript获取网页中的canvas 对象
在JavaScript中，可以使用document.getElementById()方法获取 网页中的对象，语法如下： document.getElementById(对象id) 例如，获取【例6-1】中定义的myCanvas对象的代码如下： <script type="text/javascript"> var c=document.getElementById("myCanvas"); </script> 得到的对象c即为myCanvas对象。要在其中绘图还需要获得 myCanvas对象的2d渲染上下文（CanvasRenderingContext2D）对 象，代码如下： var ctx=c.getContext("2d");
浏览【例6-3】的结果
浏览【例5-2】的界面
一个通过画线绘制复杂图形的例子。
<canvas id="myCanvas" height=1000 width=1000>您的浏览器不支持 canvas。</canvas> <script type="text/javascript"> function drawline() { var c=document.getElementById("myCanvas"); // 获取网页中的canvas对象 var ctx=c.getContext("2d"); //获取canvas对象的上下文 var dx=150; var dy=150; var s = 100; ctx.beginPath(); // 开始绘图路径 var x = Math.sin(0); var y = Math.cos(0); var dig=Math.PI/15*11; for(var i = 0;i<30;i++){ var x = Math.sin(i*dig);图6-6 浏览【例6-4】的结果 var y = Math.cos(i*dig); //用三角函数计算顶点 ctx.lineTo(dx+x*s,dy+y*s); } ctx.closePath(); ctx.stroke(); } window.addEventListener("load", drawline, true); </script>
浏览【例6-2】的结果
【例6-3】
使用连续画线的方法绘制一个三角形，代码如下： <canvas id="myCanvas" height=100 width=100>您的浏览 器不支持 canvas。</canvas> <script type="text/javascript"> function drawtriangle() { var c=document.getElementById("myCanvas"); // 获取网 页中的canvas对象 var ctx=c.getContext("2d"); //获取canvas对象的上下文 ctx.beginPath(); // 开始绘图路径 ctx.moveTo(10,10); // 将坐标移至直线起点 ctx.lineTo(10,100); // 绘制直线 ctx.lineTo(100,100); // 绘制直线 ctx.lineTo(10,10); // 绘制直线图6-5 浏览【例6-3】的结果 ctx.stroke(); // 关闭绘图路径 } window.addEventListener("load", drawtriangle, true); </script>