Canvas Grids 的简单实现

最新推荐文章于 2024-08-08 07:40:08 发布

Sarkuya

最新推荐文章于 2024-08-08 07:40:08 发布

阅读量1.5k

点赞数 2

分类专栏： Canvas HTML5 JavaScript WebDev 文章标签： Canvas Grids Coordinate

本文链接：https://blog.csdn.net/sarkuya/article/details/89414290

版权

下面的代码在HTML Canvas中绘制了坐标轴及坐标格线Grids。

<!DOCTYPE html>

<html>
    <head>
        <title>Canvas Grid</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <script type="text/javascript">
            var GRID_PADDING = 28;
            
            var LONG_MARK_LENGTH = 5;
            var SHORT_MARK_LENGTH = LONG_MARK_LENGTH / 2;
            var LONG_MARK_GAP = 50;
            
            var GRID_LENGTH = LONG_MARK_GAP / 2;
            
            var GRID_STROKE_STYLE = "#999";
            
            var ARROW_ANGLE = 30;
            var ARROW_LENGTH = 10;
            
            function init() {
                var canvas = document.getElementById("canvas");
                var ctx = canvas.getContext("2d");
                
                canvas.width = document.body.clientWidth;
                canvas.height = window.innerHeight - 105;

                ctx.translate(GRID_PADDING, GRID_PADDING);
                
                drawXAxis(ctx);
                drawYAxis(ctx);
                drawGrids(ctx);
                
                doDrawing(ctx);
            }
            
            function doDrawing(ctx) {
                ctx.beginPath();
                
                ctx.rect(50, 50, 100, 100);
                
                ctx.fillStyle = "hsla(160, 80%, 20%, 0.8)";
                ctx.font = "40px serif";
                ctx.textBaseline = "middle";
                ctx.textAlign = "center";
                
                ctx.fillText(&#

最低0.47元/天解锁文章