H5整理

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5整理相关的知识,希望对你有一定的参考价值。

canvas基础

<canvas id="c1" width="400" height="400">
    你的浏览器不支持!
<!--默认有宽高 : width:300 height:150 。
canvas的正确设置宽高 :属性 width="400" height="400" -->
</canvas>

<script>
    var mycanvas = document.getElementById("c1");
    mycanvas.width = 1000;
</script>

canvas宽高通过标签属性实现

        <style>
            body {
                background: black;
            }
            #c1 {
                background: white;
            }
        </style>
        <canvas id="c1" width="400" height="400">   
        </canvas>
        <script>
           
            var oC = document.getElementById("c1");
           
            //获取绘制2d 图像的环境。
            var oCanvas = oC.getContext("2d");
           
           
            oCanvas.fillRect(100,100,100,100);
           
            //左边距 上边距  ,矩形宽 和高。
            oCanvas.strokeRect(100,250,100,100);
        </script>

fillRect()表示填充图像,

strokeRect()表示描边图像

技术分享

<style>
    body {
        background: black;
    }
    #c1 {
        background: white;
    }
</style>
<canvas id="c1" width="400" height="400">
</canvas>
<script>
    var oC = document.getElementById(‘c1‘);
    var oGC = oC.getContext(‘2d‘);

    oGC.fillStyle = ‘yellow‘;

    oGC.lineJoin = "bevel"; //绘制线的图形,而不是填充的图形
           
//            miter(默认) 、round(圆角)、bevel(斜角)


    oGC.fillRect(100,100,200,100);
   
    oGC.strokeStyle = ‘blue‘;
    oGC.lineWidth = 10;
    oGC.strokeRect(100,250,100,100);
</script>

fillStylestrokeStyle设置图像的颜色

lineWidth设置描边的边框宽度

lineJoin  :   边界连接点样式
miter(默认) 、round(圆角)、bevel(斜角)

技术分享

        <style>
            body {
                background: black;
            }
            #c1 {
                background: white;
            }
        </style>
        <canvas id="c1" width="400" height="400">
        </canvas>
        <script>
            var oC = document.getElementById(‘c1‘);
            var oGC = oC.getContext(‘2d‘);

            oGC.strokeStyle = ‘red‘;
            oGC.fillStyle = "blue";
            oGC.lineWidth = 1;
           
            oGC.beginPath(); //开始绘制路径
            oGC.moveTo(100,100);  //设置一个初始点
            oGC.lineTo(200,200); //下一个目标点
            oGC.lineTo(200,300); //
            oGC.closePath();
            oGC.fill();  //填充颜色

            oGC.beginPath();
            oGC.moveTo(300,300);
            oGC.lineTo(300,350);
            oGC.lineTo(350,200);
            oGC.closePath();  //帮助闭合路径
            oGC.stroke(); //划线连接
           
            //清除画布某个区域
//            oGC.clearRect(100,100,100,200);
           

beginPath :  开始绘制路径
closePath  :  结束绘制路径(自动闭合相关路径) closePath()要在stroke 前调用
moveTo  :  确定绘制的起始点
lineTo  :  绘制路径到新的目标点

stroke :  画线,默认黑色   
fill  :  填充,默认黑色
clearRect  :   清除一个画布的矩形区域

技术分享

<style>
    body {
        background: black;
    }
    #c1 {
        background: white;
    }
</style>
<canvas id="c1" width="400" height="400">
</canvas>
<script>
    var oC = document.getElementById(‘c1‘);
    var oGC = oC.getContext(‘2d‘);

    /*1. 清除画布矩形区域(x , y, w,h)*/
    //oGC.fillRect(50,50,100,100);
    //oGC.clearRect(100,100,50,50);

    /*2. 清除整个画布*/
    //oGC.clearRect(0,0,oC.width,oC.height);
   
    /*3. save() and restore()*/
    oGC.strokeStyle = ‘black‘;
    oGC.lineWidth = ‘1‘;
   
oGC.save();     //保存上面的配置(属性值);
    oGC.strokeStyle = ‘red‘;
    oGC.lineWidth = "20";
    oGC.beginPath();
    oGC.moveTo(100, 100);
    oGC.lineTo(200, 200);
    oGC.lineTo(300, 200);
    oGC.closePath();
    oGC.stroke();
oGC.restore(); //恢复上次保存的属性值。

    //如果不写save 和restore  就会填充红色的效果
oGC.save();     //保存上面的配置(属性值);
    oGC.strokeStyle = ‘blue‘;
    oGC.lineWidth = "10";
    oGC.beginPath();
    oGC.moveTo(100, 200);
    oGC.lineTo(200, 300);
    oGC.lineTo(300, 300);
    oGC.closePath();
    oGC.stroke();
oGC.restore();

    oGC.beginPath();
    oGC.moveTo(0, 0);
    oGC.lineTo(100, 180);
    oGC.lineTo(180, 180);
    oGC.closePath();
    oGC.stroke();
</script>

save  : 保存路径
restore  :  恢复路径
例子   :    鼠标画线   ,    方块移动

实例:

1.鼠标划线

<style>
    body {
        background: black;
    }
    #c1 {
        background: white;
    }
</style>
<canvas id="c1" width="400" height="400">
</canvas>
<script>
    var oC = document.getElementById(‘c1‘);
    var oGC = oC.getContext(‘2d‘);
    oGC.strokeStyle = "red";
   
    //线帽
    oGC.lineCap = "round";
    oGC.lineWidth = "10";
   
    oC.onmousedown = function(ev){
        //确定划线的起始位置
        oGC.beginPath();
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

    //兼容滚动条
        oGC.moveTo(ev.clientX-oC.offsetLeft+scrollLeft,ev.clientY-oC.offsetTop+scrollTop);
        oC.onmousemove = function(ev){
            oGC.lineTo(ev.clientX-oC.offsetLeft+scrollLeft,ev.clientY-oC.offsetTop+scrollTop);
            oGC.stroke();
        }               
        oC.onmouseup = function(){
            oC.onmousemove = null;
            oC.onmouseup = null;
        }
    }

技术分享

2.方块水平移动

        <style>
            body {
                background: black;
            }
           
            #c1 {
                background: white;
            }
        </style>
        <canvas id="c1" width="400" height="400" tabindex="0">
        </canvas>
        <script>
            var oC = document.getElementById(‘c1‘);
            var oGC = oC.getContext(‘2d‘);
            oGC.fillStyle= "red";
            oGC.fillRect(0, 0, 100, 100);
           
            var iNow = 0;
//            setInterval(function(){
//                oGC.clearRect(0,0,400,400);
//                iNow++;
//                oGC.fillRect(0, iNow, 100, 100);
//            },30);

            //canvas ”动画效果“, 边擦边画实现
           
            //canvas本身 不支持键盘事件。
           
            //支持键盘有两种方法:
           
//            (1)给window 绑定键盘

//            (2)给canvas 加上一个tabindex 属性

            var isRightNow = 0;
            oC.onkeydown = function(ev){
                console.log(ev);
                if(ev.keyCode==39){
                    oGC.clearRect(0,0,400,400);
                    isRightNow++;
                    oGC.fillRect(isRightNow,0,100,100);
                }else if(ev.keyCode==37){
                    oGC.clearRect(0,0,400,400);
                    isRightNow--;
                   
                    oGC.fillRect(isRightNow,0,100,100);
                }
            }
        </script>

 

arc(x, y, 半径, 起始弧度, 结束弧度, 旋转方向)
x ,  y  :   起始位置
弧度与角度的关系:弧度 = 角度*Math.PI/180
旋转方向:顺时针(默认:false)、逆时针(true)

 

<style>
    body {
        background: black;
    }
    #c1 {
        background: white;
    }
</style>
<canvas id="c1" width="400" height="400"></canvas>
<script>
    //弧度 = 角度*Math.PI/180
    //默认 : 顺时针旋转 , 最后一个参数控制旋转方向 :false顺时针,true就是逆时针(顺时针开始画还是逆时针开始画)

    var oC = document.getElementById(‘c1‘);
    var oGC = oC.getContext(‘2d‘);
    oGC.beginPath();

    oGC.arc(200, 200, 100, 0 * Math.PI / 180, 360 * Math.PI / 180,false);
    oGC.closePath();
    oGC.fill();
    oGC.stroke();
</script>










































































































































































































































以上是关于H5整理的主要内容,如果未能解决你的问题,请参考以下文章

h5视频落地页知识点整理

手机端H5加载中效果demo(整理)

H5相关知识点整理

热门移动端H5开源前端开发框架搜集整理

热门移动端H5开源前端开发框架搜集整理

WebView白屏优化的一些整理