canvas繪圖時位置偏離如何解決?

    Canvas API(畫布)是在HTML5中新增的標(biāo)簽用于在網(wǎng)頁實時生成圖像,并且可以操作圖像內(nèi)容,基本上它是一個可以用JavaScript操作的位圖(bitmap)。
    Canvas 對象表示一個 HTML 畫布元素 -<canvas>。它沒有自己的行為,但是定義了一個 API 支持腳本化客戶端繪圖操作。

    H5開發(fā)使用 canvas 繪圖時,指定的 div 大小一定不要超過該 div 所能獲得的最大范圍,否則繪制的點會跟實際位置發(fā)生偏離。

    canvas繪圖
    canvas繪圖

    例如

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled 1</title>
    <style type="text/css">
    .style1 {
    ??font-size: x-small;
    }
    </style>
    </head>
    ?
    <body >
    ????<div style="margin:2%">
    ????????????<div id="test" style="width:800px;height:800px;background-color:#cbdad0d9">
    ????????????????????<canvas id="container" onmousemove="mousemove(event)" onmousedown="mousedown()" onmouseup="mouseup()"></canvas>
    ????????????</div>
    ????</div>
    ????
    ????<script type="text/javascript">
    ????????var paint = false;
    ????????var start = false;
    ????????var canvas = document.getElementById("container");
    ????????canvas.width = 800;
    ????????canvas.height = 800;
    ????????var offsetY = canvas.offsetTop;
    ????????var offsetX = canvas.offsetLeft;
    ????????var y;
    ????????var x;
    ????????var context = canvas.getContext("2d");
    ????
    ????????function mousemove(e) {
    ????????????if (paint == true){
    ????????????????if (start == false){
    ????????????????????context.moveTo(0, 0);
    ????????????????????start = true;
    ????????????????} else {
    ????????????????????context.moveTo(x, y);
    ????????????????}
    ????????????????x = e.pageX - offsetX;
    ????????????????y = e.pageY - offsetY;
    ????????????????context.lineTo(x, y);
    ????????????????context.stroke();
    ????????????}
    ????????}
    ????
    ????????function mousedown(event) {
    ????????????paint = true;
    ????????????console.log("down")
    ????????}
    ????
    ????????function mouseup(event) {
    ????????????paint = false;
    ????????????console.log("up")
    ????????}
    ????
    ????</script>
    </body>
    </html>

    上例中可以正確的繪制線圖。

    如果更改為:

    1
    2
    3
    4
    5
    <div style="margin:20%">
    ????????<div id="test" style="width:800px;height:800px;background-color:#cbdad0d9">
    ????????????????<canvas id="container" onmousemove="mousemove(event)" onmousedown="mousedown()" onmouseup="mouseup()"></canvas>
    ????????</div>
    </div>

    由于 canvas 所需 width 800px 無法滿足,因此繪制線圖時,與實際鼠標(biāo)位置發(fā)生偏離。




    請輸入姓名或昵稱
    如果您有任何疑問、需要更多信息或希望與我們建立合作請留言
    =

    本文來自網(wǎng)絡(luò),經(jīng)授權(quán)后發(fā)布,本文觀點不代表Infocode藍(lán)暢信息技術(shù)立場,轉(zhuǎn)載請聯(lián)系原作者。

    (0)
    Infocode藍(lán)暢Infocode藍(lán)暢
    上一篇 2020年11月21日 下午10:22
    下一篇 2020年11月27日 下午3:23

    相關(guān)文章內(nèi)容推薦

    国产综合精品久久亚洲 | 亚洲AV永久无码精品一区二区国产| 婷婷在线视频观看| 亚洲国产精品线在线观看| 欧美精品v欧洲精品| 2022av在线| 外国成人免费视频| 精品人妻人人做人人爽| 亚洲精品V欧洲精品V日韩精品| 精品伦精品一区二区三区视频 | 国产精品你懂的| 成人无码精品1区2区3区免费看| 中文成人无字幕乱码精品区 | 午夜精品免费在线观看| 女人高潮内射99精品| 精品人妻一区二区三区毛片 | 国产精品多p对白交换绿帽| 无码人妻精品一区二区三区在线| 亚洲av无码成人精品区| 麻豆国产在线精品国偷产拍| 亚洲欧洲国产日韩精品| 国内精品久久久久影院薰衣草 | 69福利青草视频在线观看| 久久91精品国产91久久小草| 国产精品分类视频分类一区| 精品无码久久久久久久久久| 第四色视频在线观看| 国产亚洲精品一品区99热| 欧美精品在线免费| 97久久国产亚洲精品超碰热| 久久精品人妻一区二区三区| 久久国产精品波多野结衣AV| 亚洲一区精品无码| 杨幂国产精品福利在线观看| 视频在线不卡免费观看| 日韩精品一区二区三区大桥未久 | 国精无码欧精品亚洲一区| 国内精品伊人久久久久影院对白| 欧美精品v欧洲精品| 国产欧美日本精品| 国产精品无码无卡无需播放器|