网页设计与网站建设-第九讲_第1页
网页设计与网站建设-第九讲_第2页
网页设计与网站建设-第九讲_第3页
网页设计与网站建设-第九讲_第4页
网页设计与网站建设-第九讲_第5页
已阅读5页，还剩40页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网页设计与网站建设

（第九讲）主讲教师：袁旭信息科学与技术学院八、实战HTML5画布（上）HTML5Canvas绘制简单图形岭南师范学院1上讲重点内容canvas绘制直线绘制矩形绘制圆形绘制三角形绘制贝塞尔曲线岭南师范学院28.1.1在网页中添加canvas元素与HTML中的其他元素的用法类似，通过<canvas>…</canvas>在网页中添加canvas。岭南师范学院3<!doctypehtml><html><head><metacharset="utf-8"><title>Canvas</title></head><body></body></html><canvasid="myCanvas"width="300"height="150"></canvas>Canvas默认宽300px高150px8.1.1在网页中添加canvas元素与HTML中的其他元素的用法类似，通过<canvas>…</canvas>在网页中添加canvas。岭南师范学院4<!doctypehtml><html><head><metacharset="utf-8"><title>Canvas</title></head><body><canvasid="myCanvas"width="300"height="150"></canvas></body></html>8.1.1在网页中添加canvas元素在没有canvas画布中绘制任何图形前，canvas画布是不可见的。可以通过CSS中的border属性为canvas设置实心的边框。岭南师范学院5<canvasid="myCanvas"style=“border:1pxsolid”width="300"height="150"></canvas>8.1.1在网页中添加canvas元素岭南师范学院68.1.2利用canvas绘制图形的步骤canvas与HTML中的其他元素的相似之处也就到此为止啦，若要在canvas中绘制图形，需要经历四关。岭南师范学院7创建创建含id属性的canvas元素寻找利用id寻找canvas元素获取通过canvas元素的getContext方法获取上下文绘制利用JavaScript绘制图形①创建含id属性的canvas元素在HTML5网页中添加一个含有id属性的canvas元素，以便接下来的步骤寻找到这个canvas元素。岭南师范学院8<canvasid="myCanvas"width="300"height="150">抱歉，您的浏览器不支持canvas。</canvas>我的id是myCanvas②利用id寻找canvas元素利用JavaScript中的document.getElementById等方法，查到到上一步添加的canvas元素。岭南师范学院9varmyCanvas=document.getElementById("myCanvas");将查找结果保存到myCanvas中③通过getContext方法获取上下文利用getContext方法在上一步查找到的canvas对象中创建一个允许进行图形绘制的环境。岭南师范学院10varContext=myCanvas.getContext("2d");2d表示绘制的是二维图形④利用JavaScript绘制图形在上一步创建好绘制二维图形的环境Context之后，便可以在Context中绘制出各式各样的图形。岭南师范学院11Context.fillStyle=“#FF10FA”;Context.fillRect(50,25,80,100);利用fillStyle设置填充色利用fillRect绘制实心矩形8.1.2利用canvas绘制图形的步骤岭南师范学院12<canvasid="myCanvas"width="300"height="150">抱歉，您的浏览器不支持canvas。</canvas>varmyCanvas=document.getElementById("myCanvas");varContext=myCanvas.getContext("2d");Context.fillStyle=“#FF10FA”;Context.fillRect(50,25,80,100);创建寻找获取绘制8.1.2利用canvas绘制图形的步骤岭南师范学院13<!doctype

html><html><head><meta

charset="utf-8"><title>Canvas</title></head><body><canvasid="myCanvas"style="border:solid1px;"width="300"

height="150">抱歉，您的浏览器不支持canvas。</canvas><script

type="text/javascript">var

myCanvas=document.getElementById("myCanvas");var

Context=myCanvas.getContext("2d");Context.fillStyle="#FF10FA";Context.fillRect(50,25,80,100);</script></body></html>创建寻找获取绘制8.1.2利用canvas绘制图形的步骤岭南师范学院14x轴y轴坐标原点(0,0)矩形坐标(50,25)8.2绘制直线已有的数学知识告诉我们：两点成线。在完成了“利用canvas绘制图形”的前三个步骤之后，可以利用下面的JavaScript绘制直线。岭南师范学院15moveTo(x,y)设置直线的起点lineTo(x,y)设置直线的终点stroke()两点之间绘制直线8.2绘制直线岭南师范学院16Context.moveTo(0,0);Context.lineTo(50,25);Context.stroke();x轴y轴直线起点(0,0)直线终点(50,25)8.3绘制矩形在canvas中绘制矩形需要考虑这样两个问题：矩形的颜色，包括边框色与填充色矩形的位置及大小岭南师范学院17实心矩形fillStylefillRect(x,y,width,height)空心矩形strokeStylestrokeRect(x,y,width,height)8.4绘制圆形圆形相比于直线和矩形来说要复杂不少。岭南师范学院18开始路径beginPath圆形路径arc结束路径closePath绘制圆形fillstroke绘制实心圆形岭南师范学院19Context.beginPath();Context.arc(250,75,40,0,Math.PI*2,true);Context.fill();Context.fillStyle=“#FF0000”;acr(x,y,半径,开始角度,结束角度,是否顺时针)绘制空心圆形绘制空心圆形的方法与绘制实心圆形类似，只是在最后一步不是使用fill进行填充，而是使用stroke进行描边。岭南师范学院20Context.beginPath();Context.arc(250,75,20,0,Math.PI*2,true);Context.stroke();Context.strokeStyle=“#FFFFFF”;8.5绘制三角形岭南师范学院21三角形可以理解为是由三条首尾相接的直线构成的图形。结合绘制直线时用到的moveTo与lineTo以及绘制圆形时用到的beginPath与closePath，外加一点点数学知识，便可以绘制出任意的三角形。Context.lineT0(210,75);Context.lineT0(290,75);Context.moveTo(250,35);8.6清空画布岭南师范学院22随着绘制图形的JavaScript代码的执行，在canvas上的图形越来越多，一瞬间一切都变得乱糟糟，怎么办？使用clearRect方法可以清除指定的矩形区域内的所有图形。clearRect(x,y,width,height)Context.clearRect(0,0,300,150);8.7绘制贝塞尔曲线岭南师范学院23接触过计算机绘图的人想必不会对贝塞尔曲线（BezierCurve）陌生。三次方贝塞尔曲线8.7绘制贝塞尔曲线岭南师范学院24接触过计算机绘图的人想必不会对贝塞尔曲线（BezierCurve）陌生。bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)Context.bezierCurveTo(25,50,80,200,250,75);八、实战HTML5画布（下）图形的变换图形的组合岭南师范学院25本讲重点内容保存与恢复移动坐标空间旋转坐标空间缩放图形图形的组合岭南师范学院268.8保存与恢复Canvas状态在canvas中可以绘制出各式各样的图形，但是每次绘制新的图形都要设置很多属性，繁琐且容易出错。通过save可以保存当前的canvas状态，包括各种属性的值，然后通过restore可以恢复之前保存的状态。岭南师范学院27save()restore()8.8保存与恢复Canvas状态岭南师范学院28Context.fillStyle="#0000FF";Context.save();Context.fillStyle="#FF0000";Context.beginPath();Context.arc(250,75,50,0,Math.PI*2,true);Context.closePath();Context.fill();Context.fillStyle="#00FF00";Context.beginPath();Context.arc(160,225,50,0,Math.PI*2,true);Context.closePath();Context.fill();Context.restore();Context.beginPath();Context.arc(340,225,50,0,Math.PI*2,true);Context.closePath();Context.fill();这三段代码绘制出来的是什么样的图形？8.8保存与恢复Canvas状态岭南师范学院298.9移动坐标空间默认情况下canvas中的坐标原点位于画布的左上角。在绘图时可以利用translate来移动坐标空间，使得坐标原点发生偏移。岭南师范学院30Context.translate(dx,dy);8.9移动坐标空间岭南师范学院31Context.fillStyle="#0000FF";Context.save();Context.translate(250,75);Context.fillStyle="#FF0000";Context.beginPath();Context.arc(0,0,50,0,Math.PI*2,true);Context.closePath();Context.fill();Context.translate(-90,150);Context.fillStyle="#00FF00";Context.beginPath();Context.arc(0,0,50,0,Math.PI*2,true);Context.closePath();Context.fill();Context.restore();Context.beginPath()Context.arc(340,225,50,0,Math.PI*2,true);Context.closePath();Context.fill();这三段代码绘制出来的是什么样的图形？8.9移动坐标空间岭南师范学院328.10旋转坐标空间利用rotate可以旋转canvas的坐标空间。rotate只有一个参数，即旋转角度angle，旋转角度以顺时针方向为正方向，以弧度为单位，旋转中心为Canvas的原点。岭南师范学院33Context.rotate(angle);8.10旋转坐标空间岭南师范学院348.10旋转坐标空间岭南师范学院35这三段代码绘制出来的

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论