H5API

 1.画布

1.掌握canvas元素的基本概念，学会如何在页面上放置一个canvas元素，如何使用canvas元素绘制出一个简单矩形

2.掌握使用路径的方法，能够利用路径绘制出圆形与多边形

3.掌握渐变图形的绘制方法，学会图形变形，图形缩放，图形组合，以及给图形绘制阴影的方法

1.1.基本用法
(1)获取canvas对象--获取画布
    通过document.getElementById()等方法取得canvas对象。
(2)取得上下文(context)--获取画笔
    图形上下文是一个封装了很多绘图功能的对象，参数只能是“2d”
(3)定义填充样式
    context.fillStyle='red';
(4)绘制填充图形
    context.fillStyle(10,10,100,100)//第一个参数是x轴开始位置，第二个参数是y轴开始位置，第三个参数是绘制图形的宽，第四个位置是绘制图形的高

1.实例 --绘制填充矩形
//通过fillRect
window.onload=function(){
            //1.获取画布
            var canvas=document.querySelector('canvas');
            // 2.获取画布上下文对象
            var context=canvas.getContext('2d');
            // 3.绘制填充样式
            context.fillStyle='red'
            // 4.绘制填充矩形
            context.fillRect(10,10,100,100)
}
//绘制轮廓矩形 边框矩形
window.onload=function(){
     		//1.获取画布
            var canvas=document.querySelector('canvas');
            // 2.获取画布上下文对象
            var context=canvas.getContext('2d');
      		 // 设置轮廓样式
            context.strokeStyle='red'
			// 设置轮廓的线宽
            context.lineWidth=4;
            // 绘制边框矩形或者轮廓矩形
            context.strokeRect(10,10,100,100);
            // 清楚一部分区域
            context.clearRect(0,0,50,50);
            // 清楚全部区域
            context.clearRect(0,0,400,400)
}

2.实例 --绘制圆
window.onload=function(){
            // 获取画布
            var canvas=document.querySelector('canvas');
            // 获取画布上下文对象
            var context=canvas.getContext('2d');
            // 绘制圆直线曲线需要路径 开始路径
            context.beginPath();
            // 圆的路径 x y r 开始弧度 结束弧度 圆的方向是否是逆时针路径
            // Math.PI --180度
            context.arc(100,100,50,0,Math.PI,true);
            // context.arc(100,100,50,0,Math.PI/2);
            // 直线路径
            context.lineTo(100,100);
            context.lineTo(150,100);
            context.arc(300,300,50,0,Math.PI*2);
            // 结束路径
            // context.closePath();
            // 填充样式
            context.fillStyle='red'
            // 绘制填充圆
            context.fill();
            // 绘制轮廓
            // context.stroke();

}

3.实例 圆的移动
window.onload=function(){
            // 获取画布
            var canvas=document.querySelector('canvas');
            // 获取画布上下文对象
            var context=canvas.getContext('2d');
            var bubble={
                x:100,
                y:100,
                r:50,
                color:'red'
            };
            draw(bubble);
            move(bubble)
            setInterval(function(){
                // 清除画布
                context.clearRect(0,0,600,600);
                move(bubble)
            },200)
            // 绘制方法
            function draw(bubble){
               context.beginPath();
               context.arc(bubble.x,bubble.y,bubble.r,0,Math.PI*2);
               context.fillStyle=bubble.color;
               context.fill()
            }
            // 移动
            function move(bubble){
                bubble.x+=5;
                bubble.y+=5;
                draw(bubble);
            }
        }

4.绘制线段
moveTo(x,y):
		x,y:线段的起点坐标
lineTo(x,y)
		x,y:线段的终点坐标
cx.stroke();
	//fill():不能使用
lineWidth=number;

// 绘制线段
    window.onload=function(){
            // 获取画布
            var canvas=document.querySelector('canvas');
            // 获取上下文 
            var context=canvas.getContext('2d');
            // 绘制线段
            context.lineWidth=3
            context.beginPath();
            context.moveTo(0,0);
            context.lineTo(100,100);
            context.lineTo(200,10);
            context.lineTo(300,100);
            context.closePath();
            context.strokeStyle='red';
        	context.stroke();

}

5.绘制图像
 window.onload=function(){
             // 获取画笔
            // 获取画布
            var canvas=document.querySelector('canvas');
            // 获取上下文 
            var context=canvas.getContext('2d');
            // 创建img节点	绘制图片到画布中，图片dom节点，img节点绘制或者创建img节点
            var img=new Image();
            img.src='./2.jpg';
            img.onload=function(){
                // 绘制图片到画布中  从0,0点开始绘制图片，绘制一个200*200的图片
            context.drawImage(img,0,0,200,200);
            }
}

6. 绘制视频
window.onload=function(){
             // 获取画笔
            // 获取画布
            var canvas=document.querySelector('canvas');
            // 获取上下文 
            var context=canvas.getContext('2d');
            var video=document.querySelector('video');
            draw()
           	function draw(){
               context.drawImage(video,0,0,200,200);
                // 请求动画帧
               requestAnimationFrame(draw)
               //告诉浏览器你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定得回调函数更新动画
           }
}

7.绘制文本
context.font = '28px blod';
context.fillText('str', 100, 100);
// context.strokeText('str', 100, 100);