Canvasキャンバスの簡単な使用

HTML 5のcanvas要素は、jsを使用してWebページに画像を描画することができる.canvas自体は描画能力がないjsの内部で使用しなければならない.

Canvasキャンバスを使用するには、まずDOMを使用してcanvas要素

を取得する必要があります.

canvas要素の上下質問contextを取得し、パラメータ'2 d'を伝え、現在は2 d

しかサポートされていない.

画像をレンダリングする方法:stroke()は線をレンダリングすることができ、fill()は領域の塗りつぶしをレンダリングすることができる.

線を引く

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(180,20);
ctx.lineTo(180,80);
ctx.strokeStyle = 'blue';
ctx.lineWidth = 6;
ctx.lineJoin='round';//        
ctx.stroke();

円弧の描画

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(20,20);
ctx.arcTo(70, 20, 100, 100, 70); //                    ,         
ctx.strokeStyle = 'blue';
ctx.lineWidth = 6;
ctx.stroke();

円を描く

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
var centerX = canvas.width/2;
var centerY = canvas.height/2;
var radius = 45;
ctx.arc(centerX,centerY,radius,0,Math.PI*2/3,true);//           ,        ,         true    
ctx.stroke();

長方形の描画

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.rect(20,20,200,200);
ctx.fillStyle = 'red';
ctx.strokeStyle = 'yellow';
ctx.lineWidth = 5;
ctx.stroke();
ctx.fill();

にじベザールきょくせん

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(200,canvas.height/2);
ctx.quadraticCurveTo(200,80,500,200);
ctx.stroke();

さんじベザールきょくせん

ctx.beginPath();
ctx.moveTo(500,130);
ctx.bezierCurveTo(400,10,588,10,688,170);
ctx.lineWidth = 5;
ctx.strokeStyle = 'blue';
ctx.stroke();

せんけいランプ

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var clg = ctx.createLinearGradient(0,400,400,400);//           ,          
clg.addColorStop(0,'red');
clg.addColorStop(0.5,'blue');
clg.addColorStop(1,'green');
ctx.fillStyle = clg;
ctx.fillRect(20,20,400,400);

ラジアルランプ

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var crg = ctx.createRadialGradient(325,100,20,325,100,80); //              ,             
crg.addColorStop(0,'red');
crg.addColorStop(0.5,'blue');
crg.addColorStop(1,'green');
ctx.fillStyle = crg;
ctx.fillRect(230,10,200,200);

シャドウの設定

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.rect(20,20,200,200);
ctx.fillStyle = 'red';
ctx.strokeStyle = 'yellow';
ctx.lineWidth = 10;
ctx.shadowColor = 'peru';
ctx.shadowBlur = 25;
ctx.shadowOffsetX = 20;
ctx.shadowOffsetY = 20;
ctx.stroke();
ctx.fill();

画像の描画

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'QQ20171107-142421.png';
img.onload = function(){
        ctx.drawImage(img,20,20,100,200,20,20,50,40);//            
}

テキストの描画

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var x = canvas.width/2;
var y = canvas.height/2;
ctx.font = 'italic 40px Arial';
ctx.strokeStyle='yellow'; //     fillStyle      
ctx.lineWidth = 2;
ctx.strokeText('Hello World!',x,y);  //     fillText     

文字の幅を測る