在canvas元素中绘制坐标

最新推荐文章于 2024-09-06 23:54:14 发布

lian_老练

最新推荐文章于 2024-09-06 23:54:14 发布

阅读量925

点赞数 1

分类专栏： Web前端文章标签： canvas 绘制坐标

本文链接：https://blog.csdn.net/weixin_41461967/article/details/95631154

版权

本文介绍了如何在HTML5的canvas元素中绘制精确的坐标系统，包括必要的代码展示和最终实现的效果展示。

摘要由CSDN通过智能技术生成

1. 代码展示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form action="#">
            宽<input type="text" id="width"></input>&nbsp;&nbsp;&nbsp;
            高<input type="text" id="height"></input>
            <button id="button" onclick="getWidthAndHeight()">确定</button>
            <button id="button" onclick="button2ClickHandler()">绘图</button>
            <button id="button" onclick="button3ClickHandler()">确定</button>
        </form>
        <canvas width="600" height="300" id="canvas1"></canvas>
        <script>
            let myCanvas=document.getElementById('canvas1');
            let ctx=myCanvas.getContext('2d');
            ctx.font="12px Arial";
            //保存从输入框输入的宽高值
            let width=100;
            let height=50;
            //获取canvas元素的宽高  
            let canvasHeight=ctx.canvas.height;
            let canvasWidth=ctx.canvas.width;
            //获取canvas元素相对于可用视图的位置信息对象
            let drawingRect=myCanvas.getBoundingClientRect();
            //定义绘矩形方法ctx.strokeText(x,y,width,height)四个参数的值
            let drawingRectX=0;
            let drawingRectY=0;
            let drawingRectWidth=0;
            let drawingRectHeight=0;