HTML5介绍ppt教程文件.ppt

,WelcometoHTML5,什么是HTML5,HTML5的特点,HTML5的新特性,简介+趋势,优势varcxt=c.getContext(2d);vargrd=cxt.createLinearGradient(0,0,800,400);grd.addColorStop(0,#FF0000);grd.addColorStop(1,#00FF00);cxt.fillStyle=grd;cxt.fillRect(0,0,800,400);,画布是一个矩形区域，您可以控制其每一像素。通过HTML5的元素来使用JavaScript绘制形状和图形，并在Web页面上创建动画，而这些并不需要通过其他语言（SVG，Flash）来实现。,Canvas元素绘图,/消失的正方型html5canvas消失的正方形Yourbrowserdoesnotsupportthecanvaselement./创建一个画布，双击元素时调用擦除函数/加入JavaScript，绘制正方形functiondrawSquare()varcanvas=document.getElementById(myCanvas);varcontext=canvas.getContext(2d);context.fillStyle=rgb(13,118,208);context.fillRect(30,30,140,140);/在JavaScript中创建一个擦除函数functioneraseSquare()varcanvas=document.getElementById(myCanvas);canvas.width=canvas.width;,画布是一个矩形区域，您可以控制其每一像素。通过HTML5的元素来使用JavaScript绘制形状和图形，并在Web页面上创建动画，而这些并不需要通过其他语言（SVG，Flash）来实现。,Canvas元素绘图,html5canvas八角形Yourbrowserdoesnotsupportthecanvaselement.varcanvas=document.getElementById(myCanvas);varcontext=canvas.getContext(2d);/1.开始绘制路径，将绘制点移动至200,0.context.beginPath();context.moveTo(200,0);/2.绘制一条400,0的线。context.lineTo(400,0);/3.绘制7条分别到600,200；600,400；400,600；200,600；0,400；以及0,200；context.lineTo(600,200);context.lineTo(600,400);context.lineTo(400,600);context.lineTo(200,600);context.lineTo(0,400);context.lineTo(0,200);/闭合路径context.closePath();/将填充色设置为蓝色context.fillStyle=#0000ff;/填充该八角形context.fil