HTML5介绍ppt课件.ppt

1、,Welcome to HTML 5,什么是HTML5,HTML5的特点,HTML5的新特性,简介+趋势,优势 var cxt=c.getContext(2d); var grd=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页面上创建

2、动画， 而这些并不需要通过其他语言 （SVG，Flash）来实现。,Canvas元素绘图,/消失的正方型 html5 canvas 消失的正方形 Your browser does not support the canvas element. /创建一个画布，双击元素时调用擦除函数 /加入JavaScript，绘制正方形 function drawSquare() var canvas = document.getElementById(myCanvas); var context = canvas.getContext(2d); context.fillStyle = rgb(13,118

3、,208); context.fillRect(30,30,140,140); /在JavaScript中创建一个擦除函数 function eraseSquare() var canvas = document.getElementById(myCanvas); canvas.width = canvas.width; ,画布是一个矩形区域，您可以 控制其每一像素。 通过HTML5的元素来 使用JavaScript绘制形状和图 形，并在Web页面上创建动画， 而这些并不需要通过其他语言 （SVG，Flash）来实现。,Canvas元素绘图, html5 canvas 八角形 Your bro

4、wser does not support the canvas element. var canvas = document.getElementById(myCanvas); var context = 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.