canvas

最新推荐文章于 2023-11-05 18:07:00 发布

Sunshine_gao

最新推荐文章于 2023-11-05 18:07:00 发布

阅读量774

点赞数

分类专栏： HTML5 文章标签： html5

HTML5 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<script>
    window.onload = function(){
        try{
            document.createElement("canvas").getContext("2d");
            document.getElementById("support").innerHTML =  "HTML5 canvas is supported in your browser";
        }catch (e){
            document.getElementById("support").innerHTML = "HTML5 canvas is not supported in your browser";
        }
        //取得canvas元素及其绘图上下文
        var canvas = document.querySelector("#diagonal");
        var context = canvas.getContext('2d');

        //用绝对坐标来创建一条路径
        context.beginPath();
        context.moveTo(0,200);
        context.lineTo(200,0);

        //将这条线绘制到canvas上
        context.stroke();
    }
</script>
<body>
    <div id="support"></div>
    <canvas id ="diagonal" height="200" width="200" style="border: 1px solid red"></canvas>
</body>
</html>