Canvas设置样式无效导致圆变成椭圆的问题研究剖析
生活随笔
收集整理的這篇文章主要介紹了
Canvas设置样式无效导致圆变成椭圆的问题研究剖析
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Canvas設置樣式無效導致圓變成橢圓的問題研究剖析，如下面代碼段。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 設置的是600*600 */canvas{width: 600px;height: 600px;}</style> </head> <body> <canvas id="canvas" style="background: red;"></canvas><script>//VSCode:惡心;插件不好搞;/** @type {HTMLCanvasElement}*/let canvas=document.getElementById('canvas');let ctx=canvas.getContext('2d');//畫圓操作//利用2d對象進行繪制圓操作//arc(x,y,半徑，開始位置,結束角度,選轉方向)false:表示順指針;true:逆時針console.log(canvas.width+","+canvas.height);ctx.arc(80,80,50,0,2*Math.PI,true); //繪制圓方法;ctx.fillStyle='blue';ctx.fill();</script> </body> </html>使用瀏覽器輸出測試效果如下所示。
ctx.arc(80,80,50,0,2Math.PI,true); //繪制圓方法;改行代碼我們設置的是繪制圓，但是顯示的橢圓怎么回事嗯？
這時候使用下面的語句進行測試一下，查看canvas的寬、高。
我們發現canvas的寬和高是300 150.如下所示。
為什么回事這樣呢？我們現在把canvas的樣式設置給注釋掉。再次運行代碼，查看瀏覽器效果。發現即使我們沒有給canvas設置寬和高，也會自動有寬 高位300 150的設置。
這時候，剛才繪制的橢圓思路已經很清晰了，原因在于，canvas繪制之后，首先相當于作為了一張300150的圖片進行繪制，即上圖。這時候把上圖截圖后放到畫圖。
因為默認的canvas已經繪制完圓形圖片，現在被作為了圖片再進行樣式設置。代碼“canvas{width: 600px;height: 600px;} ”相當于對這個圖片進行拉伸設置，那么我們對這個圖片進行拉伸，拉伸后效果就是圖1的效果。
這是canvas在使用過程中很容易掉的一個坑，所以，建議針對canvas的設置，直接在canvas的屬性里面設置，不要在樣式里面設置。
總結
以上是生活随笔為你收集整理的Canvas设置样式无效导致圆变成椭圆的问题研究剖析的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jquery入门与实践案例教程
- 下一篇： 零基础带你飞web前端教程带你探究web