HTML5 API(上)-Canvas

一、Canvas

Canvas本质上是一个位图画步。

canvas.png

提示：
(1)Canvas的宽和高只能用属性方式声明！若使用样式来声明则无效。
(2)Canvas的本意是“画布/画板”，可以盛放绘制的内容；真正执行绘图任务的是“画笔/绘图上下文对象”——Context
(3)每一个画布，有且只有一个画笔对象：

var ctx = canvas.getContext( '2d' );

(4)画笔/绘图上下文对象的成员——小难点：

 
  
  
  fillStyle:"#000000" 填充颜色 
  font:"10px sans-serif" 字体 
  globalAlpha:1 全局透明度 
  lineCap:"butt" 线的端点样式 
  lineJoin:"miter" 线的连接处样式 
  lineWidth:1 线条的宽度 
  shadowBlur:0 阴影部分模糊距离 
  shadowColor:"rgba(0, 0, 0, 0)" 阴影部分颜色 
  shadowOffsetX:0 阴影水平偏移量 
  shadowOffsetY:0 阴影竖直偏移量 
  strokeStyle:"#000000" 轮廓/描边颜色 
  
  
  
  arc:arc() 绘制一个弧线 
  beginPath:beginPath() 开始绘制路径 
  clearRect:clearRect() 清除一个矩形范围 
  clip:clip() 裁切 
  closePath:closePath() 闭合一条路径 
  createLinearGradient:createLinearGradient() 创建一个线性渐变色 
  createRadialGradient:createRadialGradient() 创建一个径向渐变色 
  drawImage:drawImage() 绘制一幅图像 
  ellipse:ellipse() 绘制一个椭圆 
  fill:fill() 填充一条路径 
  fillRect:fillRect() 填充一个矩形区域 
  fillText:fillText() 填充一段文本 
  lineTo:lineTo() 绘制一条直线 
  measureText:measureText() 测量一段文本，得到宽度 
  moveTo:moveTo() 移动画笔到指定点 
  rect:rect() 绘制一个矩形路径 
  rotate:rotate() 旋转 
  scale:scale() 缩放 
  stroke:stroke() 对一条路径描边 
  strokeRect:strokeRect() 对一个矩形进行描边 
  strokeText:strokeText() 对一段文本进行描边 
   translate:translate() 进行位移

QQ截图20170328092438.png

(1)绘制矩形(长方形)——矩形以自己的左上角作定位点
(2)绘制文本——文字以自己的坐下角作定位点

html结构：

JavaScript代码：


 function drawDiagonal(){
 //取的canvas元素及其绘图上下文
 var canvas=document.getElementById("diagonal");
 var context=canvas.getContext('2d');
 //用绝对坐标来创建一条路径
 context.beginPath();
 context.moveTo(70,140);
 context.lineTo(140,70);
 //将这条线绘制到canvas上
 context.stroke();
 }
 window.addEventListener('load',drawDiagonal(),true);

练习：绘制一个左右来回移动的矩形
经典的碰撞反弹效果

HTML5新特性——Canvas绘图技术

对于web API可以不用记住：可以查询Mozilla开发者网络API：https://developer.mozilla.org/

①第一步：Web API & DOM

QQ截图20170327181617.png

②第二步：Web API接口一览表

QQ截图20170328085704.png

③第三步：找到Canvas API

QQ截图20170328090333.png

④第四步：绘制矩形、文本，线型、文本样式、填充和描边样式、渐变和图案、图像等

二、Audio和Video

HTML5中的多媒体支持

、

function toggleSound() {
 var music = document.getElementById('clickSound');
 var toggle = document.getElementById('toggle');
 if(music.paused){
 music.play();
 toggle.innerHTML = 'Pause';
 }else{
 music.pause();
 toggle.innerHTML = 'Play';
 }
 }