大二初次使用canvas和SVG

Fishermen_sail

已于 2022-08-11 10:08:14 修改

阅读量337

点赞数

文章标签： canvas svg

于 2021-06-12 13:43:17 首次发布

本文链接：https://blog.csdn.net/Fishermen_sail/article/details/117845526

版权

随便利用canvas和SVG画了点固定的图片，注释应该写的比较清晰。
在这里插入图片描述

<!DOCTYPE html>
<h lang="cn">
<head>
    <meta charset="UTF-8">
    <title>绘制</title>
    <style>
        svg {
            stroke: black;
        }
    </style>
</head>

<body onload="draw()">
    <canvas id="canvas" width="400" height="400"></canvas>
    <!-- 谷歌浏览器不支持MathML -->
    <math>
        <mrow>
            <msup><mi>a</mi><mn>2</mn></msup>
            <mo>+</mo>
            <msup><mi>b</mi><mn>2</mn></msup>
            <mo>=</mo>
            <msup><mi>c</mi><mn>2</mn></msup>
        </mrow>
    </math>
    <br>
    <svg width="600px" height="400px">
        <line x1 = "0"  y1 ="0" x2 = "20" y2 = "20"></line>
        <polyline points="40 40, 123 10, 256 242, 40 40"></polyline>
        <text x = "0" y = "272">文本</text>
        <!-- rx和ry是圆角 -->
        <rect x = "0" y = "300" width="100" height="100" rx = "10" ry = "10"></rect>
        <circle r = "50" cx = "300" cy = "200"></circle>
        <path d = "M 300 300 a 150 100 0 0 170 170"></path>
    </svg>
</body>
<script>
    function draw() {
        var canvas = document.getElementById('canvas');
        // 用于验证浏览器是否支持canvas
        if (canvas.getContext) {
            // 选择维度（2d/3d）
            var dimensional = canvas.getContext("2d");
            // 填充色
            dimensional.fillStyle = "rgba(41, 128, 185,1.0)";
            // 绘制矩形，前两个是相对于画布图形左上角的xy方位，后面是长宽
            dimensional.fillRect(0, 0, 100, 100);
            // 挖出一个空白
            dimensional.clearRect(0, 10, 50, 50);
            // 边框
            dimensional.strokeRect(10, 10, 20, 20);
            //
            // 创建一个路径
            dimensional.beginPath();
            // 路径开始的坐标
            dimensional.moveTo(0, 100);
            // 终点坐标
            dimensional.lineTo(134, 234);
            dimensional.lineTo(150, 150);
            // 路径闭合
            dimensional.closePath();
            // 边框
            dimensional.stroke();
            // dimensional.fill();  也可以填充
            /
            dimensional.beginPath();
            // 前两个圆心，半径，从多少度开始画，Math.PI * 2表示完整的弧长，ture代表顺时针
            dimensional.arc(41, 200, 40, 0, Math.PI * 2, true);
            dimensional.stroke();
            //
            // 设置阴影
            dimensional.shadowOffsetX = 4;
            dimensional.shadowOffsetY = 4;
            dimensional.shadowBlur = 10;
            dimensional.shadowColor = "rgba(41, 128, 185,1.0)"
            dimensional.font = "宋体";
            dimensional.fillStyle = "black";
            // 后两个是坐标
            dimensional.fillText("字体",50, 300);
            ///
            // beginPath()也相当于一个分隔符和上面的图形分开，否则下面的设置会影响上面
            dimensional.beginPath();
            dimensional.lineWidth = 14;
            var gradient = dimensional.createLinearGradient(0, 0, canvas.width, canvas.height);
            gradient.addColorStop(0, 'blue');
            gradient.addColorStop(0.5, 'purple');
            gradient.addColorStop(1, 'yellow');
            dimensional.strokeStyle = gradient;
            // dimensional.strokeStyle = 'green';
            dimensional.moveTo(0, 350);
            dimensional.lineTo(150, 350);
            dimensional.stroke();
        }
    }
</script>
</html>