html キャンバスのメモ

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html キャンバスのメモ相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Canvas</title>
</head>
<body>
<script>
onload = function(){
	var canvas = document.getElementById('canvas');
	var context = canvas.getContext('2d');

	//イメージオブジェクの作成
	var img = new Image();
	img.src = 'img/image';//画像までのパス

	//画像を読み込み後実行
	img.onload = function(){
		/*
			slice_x スライスするx軸の距離
			slice_y スライスするy軸の距離
			slice_w スライスする画像の横幅
			slice_h スライスする画像の高さ
			x       画像を表示するx軸の位置
			y       画像を表示するy軸の位置
			width   表示する画像の横幅
			height  表示する画像の縦幅
		*/
		//描画処理
		//drawImage(x,y,width,height);
		context.drawImage(50,50,500,500);
		//トリミング処理
		//drawImage(slice_x,slice_y,slice_w,slice_h,x,y,width,height);
		//context.drawImage(img,300,70,500,500,50,50,500,500);
	}
}
</script>

<canvas id="canvas" width="500" height="500"></canvas>

</body>
</html>

以上是关于html キャンバスのメモ的主要内容，如果未能解决你的问题，请参考以下文章

html SVGの视框のメモ

markdown 论文を読んだときのメモ

swift RootViewController的差し替え时のメモリリーク対策

Atcoder2021 キャンディーとN人の子供 / Children and Candies

markdown AWS CLIでインスタンスのメトリクスを取得

ruby 超级でスーパークラスのメソッドの返り値とかを操作