HTML5 Canvas 扭曲现象

最新推荐文章于 2021-06-10 11:16:24 发布

WSharkCoder白鲨码农

最新推荐文章于 2021-06-10 11:16:24 发布

阅读量579

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin_44779019/article/details/107734731

版权

最近学习HTML5碰到奇怪的现象，在此记录一下，也希望其他前端大佬看到后能给个解答！！

HTML5 Canvas 扭曲现象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Canvas(详解篇）</title>
    <!--解决部分浏览器不支持H5问题(JS添加H5新标签+CSS提供新标签样式)-->
     <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>

     <style>
        header,section,footer,aside,nav,main,article,figure{
            display:block;
        }
    </style>
    <style>
    	<!-- 扭曲组叠层样式-->
        .canvas_1 {
            height: 200px;
            width: 200px;
            border: 1px solid #000000;
        }
    </style>
</head>

<body>
	<!--扭曲现象组-->
    <canvas id="canvas_1" class="canvas_1" height="50px" width="300px"
    style="border:1px solid #FF0000">
        抱歉，您的浏览器不支持HTML5 canvas,请升级您的浏览器.
    </canvas>
    <!--参照组-->
    <canvas id="canvas_2" height="200px" width="200px" 
    style="border:1px solid #000000">
        抱歉，您的浏览器不支持HTML5 canvas,请升级您的浏览器.
    </canvas>

</body>

</html>
<script>
    //扭曲现象组
    function draw_rectangle(){
        var canvas_1=document.getElementById("canvas_1");
        if(context_1=canvas_1.getContext){
            var context_1=canvas_1.getContext("2d");
            //设置颜色
            context_1.fillStyle="rgb(200,0,0)";
            //绘制矩形
            context_1.fillRect(10,10,50,50);
            context_1.fillStyle="rgba(0,0,200,0.5)";
            context_1.fillRect(30,30,50,50);
        }else return;
    }
    draw_rectangle();

    //扭曲现象参照组
    function draw_rectangle_ref(){
        var canvas_2=document.getElementById("canvas_2");
        if(context_2=canvas_2.getContext){
            var context_2=canvas_2.getContext("2d");
            context_2.fillStyle="rgb(200,0,0)";
            context_2.fillRect(10,10,50,50);
            context_2.fillStyle="rgba(0,0,200,0.5)";
            context_2.fillRect(30,30,50 ,50);
        }
    }
    draw_rectangle_ref();
</script>