Canvasは、スクリプトを使用して描画できるタグであり、プロパティとメソッドの完全なセットを提供します。これを使用して、グラフィック図面、画像処理、さらにはシンプルなアニメーションとゲームの生産を実現できます。
Canvasタグには、幅と高さの2つの属性のみがあり、キャンバスの幅と高さを設定するために使用されます。タグ属性またはスクリプトを介して設定されていない場合、デフォルトは300*150です。
さて、キャンバスの導入のためにここで止めましょう。キャンバスを組み合わせて画像を実装するJavaScriptのトリミングコードを見てみましょう。
コードコピーは次のとおりです。
var selectobj = null;
関数ImageCrop（Canvasid、ImagesOurce、X、Y、幅、高さ）{
var canvas = $（ "＃" + canvasid）;
if（canvas.length == 0 && magesource）{
戻る;
}
function canvasmousedown（e）{
StopSelect（e）;
canvas.css（ "cursor"、 "default"）;
}
関数canvasmousemove（e）{
var canvasoffset = canvas.offset（）;
var pagex = e.pagex || event.targetTouches [0] .pagex;
var pagey = e.pagey || event.targetTouches [0] .pagey;
imousex = math.floor（pagex -canvasoffset.left）;
imousey = math.floor（pagey -canvasoffset.top）;
canvas.css（ "cursor"、 "default"）;
if（selectobj.bdragall）{
canvas.css（ "cursor"、 "move"）;
canvas.data（ "drag"、true）;
var cx = imousex -selectobj.px;
cx = cx <0？ 0：CX;
mx = ctx.canvas.width -selectobj.w;
cx = cx> mx？ MX：CX;
selectobj.x = cx;
var cy = imousey -selectobj.py;
cy = cy <0？ 0：cy;
my = ctx.canvas.height -selectobj.h;
cy = cy> my？私：cy;
selectobj.y = cy;
}
for（var i = 0; i <4; i ++）{
selectobj.bhow [i] = false;
selectobj.icsize [i] = selectobj.csize;
}
//サイズの立方体の上でホバリングします
if（imousex> selectobj.x -selectobj.csizeh && imousex <selectobj.x + selectobj.csizeh &&
imousey> selectobj.y -selectobj.csizeh && imousey <selectobj.y + selectobj.csizeh）{
canvas.css（ "cursor"、 "pointer"）;
selectobj.bhow [0] = true;
selectobj.icsize [0] = selectobj.csizeh;
}
if（imousex> selectobj.x + selectobj.w -selectobj.csizeh && imousex <selectobj.x + selectobj.w + selectobj.csizeh &&
imousey> selectobj.y -selectobj.csizeh && imousey <selectobj.y + selectobj.csizeh）{
canvas.css（ "cursor"、 "pointer"）;
selectobj.bhow [1] = true;
selectobj.icsize [1] = selectobj.csizeh;
}
if（imousex> selectobj.x + selectobj.w -selectobj.csizeh && imousex <selectobj.x + selectobj.w + selectobj.csizeh &&
imousey> selectobj.y + selectobj.h -selectobj.csizeh && imousey <selectobj.y + selectobj.h + selectobj.csizeh）{
canvas.css（ "cursor"、 "pointer"）;
selectobj.bhow [2] = true;
selectobj.icsize [2] = selectobj.csizeh;
}
if（imousex> selectobj.x -selectobj.csizeh && imousex <selectobj.x + selectobj.csizeh &&
imousey> selectobj.y + selectobj.h -selectobj.csizeh && imousey <selectobj.y + selectobj.h + selectobj.csizeh）{
canvas.css（ "cursor"、 "pointer"）;
selectobj.bhow [3] = true;
selectobj.icsize [3] = selectobj.csizeh;
}
if（imousex> selectobj.x && imousex <selectobj.x + selectobj.w && imousey> selectobj.y && imousey <selectobj.y + selectobj.h）{
canvas.css（ "cursor"、 "move"）;
}
//サイズ変更キューブのドラッグの場合
var ifw、ifh、ifx、ify、mx、my;
if（selectobj.bdrag [0]）{
ifx = imousex -selectobj.px;
ify = imousey -selectobj.py;
ifw = selectobj.w + selectobj.x -ifx;
ifh = selectobj.h + selectobj.y -ify;
canvas.data（ "drag"、true）;
}
if（selectobj.bdrag [1]）{
ifx = selectobj.x;
ify = imousey -selectobj.py;
ifw = imousex -selectobj.px -ifx;
ifh = selectobj.h + selectobj.y -ify;
canvas.data（ "drag"、true）;
}
if（selectobj.bdrag [2]）{
ifx = selectobj.x;
ify = selectobj.y;
ifw = imousex -selectobj.px -ifx;
ifh = imousey -selectobj.py -ify;
canvas.data（ "drag"、true）;
}
if（selectobj.bdrag [3]）{
ifx = imousex -selectobj.px;
ify = selectobj.y;
ifw = selectobj.w + selectobj.x -ifx;
ifh = imousey -selectobj.py -ify;
canvas.data（ "drag"、true）;
}
if（ifw> selectobj.csizeh * 2 && ifh> selectobj.csizeh * 2）{
selectobj.w = ifw;
selectobj.h = ifh;
selectobj.x = ifx;
selectobj.y = ify;
}
drawscene（）;
}
function canvasmouseout（）{
$（canvas）.trigger（ "mouseup"）;
}
function canvasmouseup（）{
selectobj.bdragall = false;
for（var i = 0; i <4; i ++）{
selectobj.bdrag [i] = false;
}
canvas.css（ "cursor"、 "default"）;
canvas.data（ "select"、{
X：selectobj.x、
Y：selectobj.y、
W：selectobj.w、
H：selectobj.h
}）;
selectobj.px = 0;
selectobj.py = 0;
}
関数選択（x、y、w、h）{
this.x = x; //初期位置
this.y = y;
this.w = w; //およびサイズ
this.h = h;
this.px = x; //計算をドラッグするための追加変数
this.py = y;
this.csize = 4; //キューブのサイズのサイズを変更します
this.csizeh = 6; //キューブのサイズのサイズ（ホバー）
this.bhow = [false、false、false、false]; //ホバーステータス
this.icsize = [this.csize、this.csize、this.csize、this.csize]; //キューブのサイズのサイズを変更します
this.bdrag = [false、false、false、false]; //ステータスをドラッグします
this.bdragall = false; //選択全体をドラッグします
}
selection.prototype.draw = function（）{
ctx.strokestyle = '＃666';
ctx.linewidth = 2;
ctx.strokerect（this.x、this.y、this.w、this.h）;
//元の画像の一部を描画します
if（this.w> 0 && this.h> 0）{
ctx.drawimage（image、this.x、this.y、this.w、this.h、this.x、this、this.w、this.h）;
}
//サイズの立方体を描きます
ctx.fillstyle = '＃999';
ctx.fillRect（this.x -this.icsize [0]、this.y -y.icsize [0]、this.icsize [0] * 2、this.icsize [0] * 2）;
ctx.fillrect（this.x + this.w -this.icsize [1]、this.y- this.icsize [1]、this.icsize [1] * 2、this.icsize [1] * 2）;
ctx.fillrect（this.x + this.w -this.icsize [2]、this.y + this.h -chisize [2]、this.icsize [2] * 2、this.icsize [2] * 2）;
ctx.fillrect（this.x -this.icsize [3]、this.y + this.h -this.icsize [3]、this.icsize [3] * 2、this.icsize [3] * 2）;
};
var drawscene = function（）{
ctx.ClearRect（0、0、ctx.canvas.width、ctx.canvas.height）; // CLEAR CANVAS
//ソース画像を描画します
ctx.drawimage（image、0、0、ctx.canvas.width、ctx.canvas.height）;
//そしてそれを暗くします
ctx.fillstyle = 'rgba（0、0、0、0.5）';
ctx.fillrect（0、0、ctx.canvas.width、ctx.canvas.height）;
//選択を描画します
selectobj.draw（）;
Canvas.Mousedown（Canvasmousedown）;
canvas.on（ "touchstart"、canvasmousedown）;
};
var CreateSelection = function（x、y、width、height）{
var content = $（ "＃imagepreview"）;
x = x || math.ceil（（content.width（） - width） / 2）;
y = y || math.ceil（（content.height（） - height） / 2）;
新しい選択（x、y、幅、高さ）を返します。
};
var ctx = canvas [0] .getContext（ "2d"）;
var imousex = 1;
var imousey = 1;
var image = new Image（）;
image.onload = function（）{
selectobj = createSelection（x、y、width、height）;
canvas.data（ "select"、{
X：selectobj.x、
Y：selectobj.y、
W：selectobj.w、
H：selectobj.h
}）;
drawscene（）;
};
image.src = imagesource;
canvas.mousemove（canvasmousemove）;
canvas.on（ "touchmove"、canvasmousemove）;
var StopSelect = function（e）{
var canvasoffset = $（canvas）.offset（）;
var pagex = e.pagex || event.targetTouches [0] .pagex;
var pagey = e.pagey || event.targetTouches [0] .pagey;
imousex = math.floor（pagex -canvasoffset.left）;
imousey = math.floor（pagey -canvasoffset.top）;
selectobj.px = imousex -selectobj.x;
selectobj.py = imousey -selectobj.y;
if（selectobj.bhow [0]）{
selectobj.px = imousex -selectobj.x;
selectobj.py = imousey -selectobj.y;
}
if（selectobj.bhow [1]）{
selectobj.px = imousex -selectobj.x -selectobj.w;
selectobj.py = imousey -selectobj.y;
}
if（selectobj.bhow [2]）{
selectobj.px = imousex -selectobj.x -selectobj.w;
selectobj.py = imousey -selectobj.y -selectobj.h;
}
if（selectobj.bhow [3]）{
selectobj.px = imousex -selectobj.x;
selectobj.py = imousey -selectobj.y -selectobj.h;
}
if（imousex> selectobj.x + selectobj.csizeh &&
imousex <selectobj.x + selectobj.w -selectobj.csizeh &&
imousey> selectobj.y + selectobj.csizeh &&
imousey <selectobj.y + selectobj.h -selectobj.csizeh）{
selectobj.bdragall = true;
}
for（var i = 0; i <4; i ++）{
if（selectobj.bhow [i]）{
selectobj.bdrag [i] = true;
}
}
};
canvas.mouseout（canvasmouseout）;
canvas.mouseup（canvasmouseup）;
canvas.on（ "touchend"、canvasmouseup）;
this.getimagedata = function（previewid）{
var tmpcanvas = $（ "<canvas> </canvas>"）[0];
var tmpctx = tmpcanvas.getContext（ "2d"）;
if（tmpcanvas && selectobj）{
tmpcanvas.width = selectobj.w;
tmpcanvas.height = selectobj.h;
tmpctx.drawimage（image、selectobj.x、selectobj.y、selectobj.w、selectobj.h、0、0、selectobj.w、selectobj.h）;
if（document.getElementById（previewid））{
document.getElementById（previewid）.src = tmpcanvas.todataurl（）;
document.getElementById（previewid）.style.border = "1px solid #ccc";
}
tmpcanvas.todataurl（）を返します。
}
};
}
function autoresizeImage（maxwidth、maxheight、objimg）{
var img = new Image（）;
img.src = objimg.src;
var hratio;
var wratio;
var比= 1;
var w = objimg.width;
var h = objimg.height;
wratio = maxwidth / w;
hratio = maxheight / h;
if（w <maxwidth && h <maxheight）{
戻る;
}
if（maxwidth == 0 && maxheight == 0）{
比率= 1;
} else if（maxwidth == 0）{
if（hratio <1）{
比率= hratio;
}
} else if（maxheight == 0）{
if（wratio <1）{
比率= wratio;
}
} else if（wratio <1 || hratio <1）{
比率=（wratio <= hratio？wratio：hratio）;
} それ以外 {
比率=（wratio <= hratio？wratio：hratio） - math.floor（wratio <= hratio？wratio：hratio）;
}
if（比率<1）{
if（比率<0.5 && w <maxwidth && h <maxheight）{
比率= 1-比率;
}
w = w *比。
H = H *比。
}
objimg.height = h;
objimg.width = w;
}
友達、試してみてください。気に入っていただければ幸いです。ご不明な点がございましたら、メッセージを残してください。