JavaScript制御(変更)canvas(キャンバス)のサイズ
7577 ワード
先日、フォーラムでキャンバスの大きさを自由に変える方法を聞かれ、暇で大丈夫だと聞いた人がいたので、時間をかけて解決しました.CSDNブログには関連のブログがありません.そこで、ついでに記録しました.
html 5には新しいラベルcanvas、つまりキャンバスがあります.キャンバスはよく再描画する必要があります.サイズを変えるなど、ここで処理するのはサイズを変える問題です.補足すると、直接設定スタイルを変えるのはcanvasのサイズだけですが、画素点はそのために変わっていません.styleはcanvasの長さと幅を上げ、attributeの属性を直接設定するだけです.ピクセルポイントの数が増加し、canvasが変化すると同時にグラフィックが上昇しません.
大きさを変える方法をまとめると、1.直接styleを設定し、
この方法は実行可能に見えるが、実際には不可能である、大きさを変えたが、画像も引張り変形する.
2.canvas、widthとheightは実際にstyleの属性ではなくattributeの属性であることを明らかにしました.私たちはこのように設定することができます.
確かにこの方法ではキャンバスの大きさを伸ばすことはできませんが、新しい問題が発生しました.キャンバスが大きさを変えると再描画され、元の図形が見つかりません.どうすればいいですか.それが3つ目の方法です
3.完璧な解決策は、2の基礎の上で、まずキャンバスを記憶してから、大きさを変えて(キャンバスが再描画されている)、記憶した情報をキャンバスに再描画することである.
まとめて、キャンバスの大きさを変えるのは確かに簡単ですが、誤解に陥るのは避けられません(例えば私)、資料を探して、1時間以上処理してやっとこの問題を解決します.ブログチャンネルでも関連ブログが検索されず、後者に少しでも助けてほしい.
下才疎学浅、誤りや不足点があれば、指導してください.
html 5には新しいラベルcanvas、つまりキャンバスがあります.キャンバスはよく再描画する必要があります.サイズを変えるなど、ここで処理するのはサイズを変える問題です.補足すると、直接設定スタイルを変えるのはcanvasのサイズだけですが、画素点はそのために変わっていません.styleはcanvasの長さと幅を上げ、attributeの属性を直接設定するだけです.ピクセルポイントの数が増加し、canvasが変化すると同時にグラフィックが上昇しません.
大きさを変える方法をまとめると、1.直接styleを設定し、
document.getElemntById("canvas").style.width=""
document.getElemntById("canvas").style.height=""この方法は実行可能に見えるが、実際には不可能である、大きさを変えたが、画像も引張り変形する.
2.canvas、widthとheightは実際にstyleの属性ではなくattributeの属性であることを明らかにしました.私たちはこのように設定することができます.
document.getElemntById("canvas").setAttribute("width","")
document.getElemntById("canvas").setAttribute("height","")確かにこの方法ではキャンバスの大きさを伸ばすことはできませんが、新しい問題が発生しました.キャンバスが大きさを変えると再描画され、元の図形が見つかりません.どうすればいいですか.それが3つ目の方法です
3.完璧な解決策は、2の基礎の上で、まずキャンバスを記憶してから、大きさを変えて(キャンバスが再描画されている)、記憶した情報をキャンバスに再描画することである.
//
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Documenttitle>
head>
<style type="text/css">
canvas{
background: lawngreen;// , ,
}
style>
<body>
<canvas id="canvas" width="300" height="300">canvas>
<button id="add">addbutton><button id="sub">subbutton>
body>
<script type="text/javascript">
var content=document.getElementById("canvas").getContext("2d")
content.fillRect(50,50,100,100);
content.fillStyle="black"
// ,
// add
document.getElementById("add").onclick=function(){
//
var width=canvas.getAttribute("width")
var height=canvas.getAttribute("height");
// ,
var data=content.getImageData(0,0,width,height)
//
width=parseInt(width)+10
height=parseInt(height)+10
canvas.setAttribute("width",width)
canvas.setAttribute("height",height)
// , ,
content.putImageData(data,0,0)
}
// , .
document.getElementById("sub").onclick=function(){
var width=canvas.getAttribute("width")
var height=canvas.getAttribute("height");
var data=content.getImageData(0,0,width,height)
width=parseInt(width)-10
height=parseInt(height)-10
canvas.setAttribute("width",width)
canvas.setAttribute("height",height)
content.putImageData(data,0,0)
}
script>
html>
まとめて、キャンバスの大きさを変えるのは確かに簡単ですが、誤解に陥るのは避けられません(例えば私)、資料を探して、1時間以上処理してやっとこの問題を解決します.ブログチャンネルでも関連ブログが検索されず、後者に少しでも助けてほしい.
下才疎学浅、誤りや不足点があれば、指導してください.