学习日志

html5

视频使用方法，音频同理

案例：

<video id="vdo" src=""></video>
    <button type="button" id="play">播放</button>
    <button type="button" id="pause">暂停</button>

var vdo=document.getElementById('vdo')
        var play=document.getElementById('play')
        // var pause=document.getElementById('pause')
        // play.onclick=()=>{
        //  vdo.play()
        // }
        // play.onclick=()=>{
        //  vdo.pause()
        // }
        //一个按钮
        play.onclick=()=>{
            if(vdo.pause){
                vdo.play()
            }else{
                vdo.pause()
            }
         }

在html5中canvas是非常重要的一个部分

canvas 通过 JavaScript 来绘制 2D 图形。canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注，如果其位置发生变化，那么整个场景也需要重新绘制，包括任何已经被图形覆盖的对象

canvas的特点

1. 依赖屏幕分辨率
2. 不支持事件处理器
3. 弱的文本渲染能力
4. 能够以 .png 或 .jpg 格式保存结果图像
5. 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
6. 颜色非常细腻
7. 不可以放大或缩小

案例：

基础步骤

//创建画布
<canvas id="cvs" width="800" height="400" style="background-color: darkgray;"></canvas>

//1、获取画布
var cvs=document.getElementById('cvs')
//2、获取画笔 
var ctx=cvs.getContext('2d');

可以改变的步骤,关于canvas基本的一些练习

            // var canWidth=cvs.width;
            // var canHeight=cvs.height;
            // ctx.strokeStyle="#7a00bc"
            // ctx.lineWidth=40
            // ctx.globalAlpha=0.4
            // ctx.lineCap='round'
            // // ctx.fillRect(canWidth/2,canHeight,30,-200)
            
            // //1、开始路径
            // ctx.beginPath()
            // //2、确定路径的起点
            // ctx.moveTo(canWidth/2,canHeight)
            // //3、绘制一条线段
            // ctx.lineTo(canWidth/2,200)
            // //4、完成路径绘制
            // ctx.stroke()
            // //结束路径
            // ctx.closePath()
                    
            //绘制五角星
            // ctx.strokeStyle="#ff0000"
            // ctx.beginPath()
            // ctx.moveTo(100,200)
            // ctx.lineTo(300,200)
            // ctx.lineTo(200,350)
            // ctx.lineTo(120,120)
            // ctx.lineTo(270,300)
            // ctx.lineTo(100,200)
            // ctx.stroke()
            // ctx.closePath()
            
            //绘制圆
            // ctx.strokeStyle="#ff0000"
            // ctx.arc(200,200,50,0,Math.PI*2)
            // ctx.fill()
            // ctx.stroke()
            // ctx.strokeStyle="#ff0000"
            // ctx.arc(100,100,40,0,Math.PI*2)
            // ctx.fill()
            
            //剪切任意的形状
            ctx.strokeStyle="#f00"
            ctx.rect(50,20,200,120)
            ctx.stroke()
            ctx.clip();
            // 在 clip() 之后绘制绿色矩形
            ctx.fillStyle="green";
            ctx.fillRect(0,0,150,100);
            
            
            //设置画笔样式，对画笔样式设置都要放在绘制之前
            // ctx.strokeStyle="aqua";
            // //绘制描边矩形
            // ctx.strokeRect(50,50,100,100)
            
            // //设置画笔透明度
            // ctx.globalAlpha=.7
            // //填充颜色
            // ctx.fillStyle="mediumpurple";
            // //绘制实心矩形
            // ctx.fillRect(80,80,50,50)
            
            // ctx.textAlign='center'
            // ctx.textBaseline='middle'
            // ctx.font='50px 宋体'
            // //绘制描边文本
            // ctx.strokeText("今天很冷1",200,200)
            // //绘制实体文本
            // ctx.fillText("今天很冷2",250,220)
            // console.log(ctx.measureText("今天很冷1").width)
            // // ctx.clearRect(0,0,800,600)

学习感受

需要记忆的基础很多。