css3はキャンバスへの絵の描画を実装します（コード例）

この記事では、PCやモバイル端末での利用に適した、キャンバスに絵を描く方法を紹介します。困っている友人は参考にしていただければ幸いです。

キャンバスに絵を描く

<canvas id="myCanvas" width="1000px" height="200px" >您的浏览器不支持canvas标签。</canvas>

var canvas = document.getElementById("myCanvas");
//获取画笔
var ctx=canvas.getContext('2d');
//声明Image对象
var img=new Image();
//获取img路径
img.src="img/num.png";
//把图片画到画布上
img.onload=function(){
	ctx.drawImage(img,57,0,57,64);
}

キャンバス上に複数の異なる絵を配置したい場合、複数の絵がある場合、オブジェクトを何度も宣言してパスを取得する必要がありますキャンバスに何度もペイントします。

次は、キャンバス上に描いた 6 つの絵です。

var canvas = document.getElementById("myCanvas");
//获取画笔
			var ctx=canvas.getContext('2d');
			//声明Image对象
			var img=new Image();
			var img1=new Image();
			var img2=new Image();
			var img3=new Image();
			var img4=new Image();
			var img5=new Image();
			//获取img路径
			img.src="img/num.png";
			img1.src="img/num/1.png"
			img2.src="img/num/4.png"
			img3.src="img/num/2.png"
			img4.src="img/num/5.png"
			img5.src="img/num/7.png"
			//把图片画到画布上
			img.onload=function(){
				ctx.drawImage(img,57,0,57,64);
			}
			img1.onload=function(){
				ctx.drawImage(img1,114,0,57,64);
			}
			img2.onload=function(){
				ctx.drawImage(img2,171,0,57,64);
			}
			img3.onload=function(){
				ctx.drawImage(img3,228,0,57,64);
			}
			img4.onload=function(){
				ctx.drawImage(img4,285,0,57,64);
			}
			img5.onload=function(){
				ctx.drawImage(img5,342,0,57,64);
			}

ctx.drawImage（img5,342,0,57,64）里面的参数分别为，图片，x坐标，y坐标，图片宽度，图片高度

レンダリング:

次に、キャンバスを作成したいと思います。ペイントした画像は PC とモバイル端末の両方に適用できるようになります。その後、これらのコードを再処理する必要があるのは、キャンバス上に画像を描画するためのコードだけです。確かに、少し調べてみて初めて知りました。そうでない場合は、PC とモバイルを切り替えるたびにページを手動で更新する必要がありますが、この機能はまだ実装できますが、ユーザー エクスペリエンスはあまり良くありません。

ページ サイズが変更された場合は、最初にキャンバスをクリアする必要があることに注意してください。そうしないと、さまざまなページ サイズのキャンバス オーバーレイが表示されます。

ここでは、モバイル端末とPC 端末。画面サイズが異なるモバイル デバイスに適応する場合は、さらに if(){}else{} の判断が必要になります。

要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。関連チュートリアルの詳細については、

CSS3 ビデオ チュートリアル

、Html5 ビデオ チュートリアル をご覧ください。 関連する推奨事項:

php 公共福祉トレーニング ビデオ チュートリアル

CSS3 オンライン マニュアル

div/css グラフィック チュートリアル

##HTML5 グラフィック チュートリアル

HTML5 オンライン マニュアル

#html5特殊効果コード集

以上がcss3はキャンバスへの絵の描画を実装します（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。