HTML5 学习笔记12-Canvas标签的使用

最新推荐文章于 2023-06-05 17:46:36 发布

RonnyZhao

最新推荐文章于 2023-06-05 17:46:36 发布

阅读量288

点赞数

分类专栏：学习笔记文章标签： html 新手 canvas

本文链接：https://blog.csdn.net/qq_19919127/article/details/54406704

版权

学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1、创建Canvas：Canvas元素用于图形的绘制，但<canvas>只是一个容器，内容通过脚本来完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <style>
        #mycanvas{
            width: 200px;
            height: 200px;
            background-color: #232323;
        }
    </style>
</head>
<body>
    <canvas id="mycanvas" class="canvas"></canvas>
</body>
</html>

    <script>
        var CANVAS_WIDTH=200,CANVAS_HEIGHT=200;
        window.οnlοad=function(){
            createCanvas();
        }
        function createCanvas(){
            document.body.innerHTML="<canvas id=\'mycanvas\' width=\'"+CANVAS_WIDTH+"\' height=\'"+CANVAS_HEIGHT+"\'></canvas>";
        }
    </script>

2、绘制图形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
    <script>
        var CANVAS_WIDTH=640,CANVAS_HEIGHT=640;
        var mycanvas,context;
        window.οnlοad=function(){
            createCanvas();
        }
        function createCanvas(){
            document.body.innerHTML="<canvas id=\'mycanvas\' width=\'"+CANVAS_WIDTH+"\' height=\'"+CANVAS_HEIGHT+"\'></canvas>"
            mycanvas=document.getElementById("mycanvas");
            context=mycanvas.getContext("2d");
            drawRect();
        }

        function drawRect(){
            context.fillStyle="#ff0000";
            //context.rotate(45); //旋转
            //context.translate(100,100); //位移
            context.scale(2,0.5); //缩放
            context.fillRect(0,0,200,200);
        }
    </script>
</body>
</html>

3、绘制图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas</title>
</head>
<body>
<script>
    var CANVAS_WIDTH=640,CANVAS_HEIGHT=640;
    var mycanvas,context;
    window.οnlοad=function(){
        createCanvas();
    }
    function createCanvas(){
        document.body.innerHTML="<canvas id=\'mycanvas\' width=\'"+CANVAS_WIDTH+"\' height=\'"+CANVAS_HEIGHT+"\'></canvas>"
        mycanvas=document.getElementById("mycanvas");
        context=mycanvas.getContext("2d");
        drawImg();
    }

    function drawImg(){
        var img=new Image();
        img.οnlοad=function(){
            context.drawImage(img,0,0);
        }
        img.src="drag.png";
    }
</script>
</body>
</html>