canvas 基础

最新推荐文章于 2024-08-18 02:27:21 发布

MandyMinL

最新推荐文章于 2024-08-18 02:27:21 发布

阅读量175

点赞数

分类专栏： HTML5 canvas 文章标签： canvas 图形标签脚本

本文链接：https://blog.csdn.net/sinat_36581022/article/details/53005627

版权

HTML5 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

canvas

4 篇文章 0 订阅

订阅专栏

标签定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。

这里写代码片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas基础</title>
</head>
<body>
<canvas id="canvas" style="display: block;margin: 10px auto;border: 1px solid peachpuff;"></canvas>
<script>
    window.onload=function () {
        var canvas=document.getElementById("canvas");
        canvas.width=1024;
        canvas.height=768;
        var context=canvas.getContext("2d");

        context.beginPath();  //开始新的路径 多个路径
        context.moveTo(100,100);  //起始点
        context.lineTo(700,700);   //中间点
        context.lineTo(100,700);   中间点
        context.lineTo(100,100);  //结束点   可以绘制出各种形状
        context.closePath();   //结束当前路径


//        context.fillStyle="rgb(2,100,30)";  //填充的颜色
//        context.fill();  //填充

        context.lineWidth=5;  //边框宽度
        context.strokeStyle="red";  //绘制所使用的颜色
        context.stroke();   //绘制线条

        context.beginPath();  // //开始新的路径
        context.moveTo(200,100);
        context.lineTo(700,600);
        context.closePath();   结束当前路径

        context.strokeStyle="black";
        context.stroke();

    }
</script>

</body>
</html>