JavaScriptのcanvas図面を深く勉強します(下)!!!
85769 ワード
円弧の描画弧度概念 1.弧度とは長さの記述単位2である.1つの弧はどのように1つの円がどれだけの弧2*π3を持っているかを説明します.1つの弧の長さ1つの弧の半径の長さ
テキストの描画
実例練習四分の一円弧 を描画右上隅の4分の1の扇形 を描画円を描く 円グラフ を描く
アニメやってる!!!
画像を描く
シーケンスフレームアニメーション精霊図 を描く動いて 制御境界 キーボード制御 座標変換ざひょうへんかん移動キャンバスの原点を移動 translate(x,y)パラメータは、移動対象点の座標 を表す.
ズーム scale(x,y)パラメータは、幅の高いスケーリング比 を表す.
回転 rotate(angle)パラメータは回転角度 を表す
Demo描画画像 フレームアニメーション 方向キー制御走行の小人 認識canvasの変換
もし不足があれば、皆さんの批判と指摘を歓迎して、この文章がみんなに助けをもたらすことができることを望みます!!!
： 360
：
：2 * π * r
： π/180
- arc()
+ x
+ y
+ r
+ startAngle
+ endAngle
+ anticlockwise （ false ；true ）
テキストの描画
- ctx.font = ' '
- strokeText()
- fillText(text,x,y,maxWidth)
+ text
+ x,y （ ）
+ maxWidth ，
- ctx.textAlign ，
+ left
+ center
+ right
+ start
+ end
- ctx.direction css(rtl ltr) start end
+ ltr,start left
+ rtl,start right
- ctx.textBaseline （ ）
+ top ，
+ middle
+ bottom ，
+ hanging ，
+ alphabetic ， ，
+ ideographic bottom ，
- measureText() obj.width
実例練習
<canvas width="600" height="400"></canvas>
<script>
var myCanvas = document.querySelector('canvas');
var ctx = myCanvas.getContext('2d');
/* */
/* x y*/
/* r */
/* startAngle endAngle */
/* direction false true */
/* 150px */
var w = ctx.canvas.width;
var h = ctx.canvas.height;
ctx.arc(w/2,h/2,150,Math.PI/2,Math.PI,true);
ctx.stroke();
</script>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas = document.querySelector('canvas');
var ctx = myCanvas.getContext('2d');
/* 150px */
var w = ctx.canvas.width;
var h = ctx.canvas.height;
/* */
ctx.moveTo(w/2,h/2);
ctx.arc(w/2,h/2,150,0,-Math.PI/2,true);
/* */
//ctx.closePath();
ctx.fill();
</script>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas = document.querySelector('canvas');
var ctx = myCanvas.getContext('2d');
var w = ctx.canvas.width;
var h = ctx.canvas.height;
/* */
var num = 360;
/* */
var angle = Math.PI * 2 / num;
/* */
var x0 = w / 2;
var y0 = h / 2;
/* */
var getRandomColor = function () {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return 'rgb(' + r + ',' + g + ',' + b + ')';
}
/* */
//var startAngle = 0;
for (var i = 0; i < num; i++) {
var startAngle = i * angle;
var endAngle = (i + 1) * angle;
ctx.beginPath();
ctx.moveTo(x0, y0);
ctx.arc(x0, y0, 150, startAngle, endAngle);
/* */
ctx.fillStyle = getRandomColor();
ctx.fill();
}
</script>
<canvas width="600" height="400"></canvas>
<script>
/*var myCanvas = document.querySelector('canvas');
var ctx = myCanvas.getContext('2d');*/
/*1. */
/*1.1 */
/*1.2 */
/*1.3 */
var PieChart = function (ctx) {
/* */
this.ctx = ctx || document.querySelector('canvas').getContext('2d');
/* */
this.w = this.ctx.canvas.width;
this.h = this.ctx.canvas.height;
/* */
this.x0 = this.w / 2 + 60;
this.y0 = this.h / 2;
/* */
this.radius = 150;
/* */
this.outLine = 20;
/* */
this.rectW = 30;
this.rectH = 16;
this.space = 20;
}
PieChart.prototype.init = function (data) {
/*1. */
this.drawPie(data);
};
PieChart.prototype.drawPie = function (data) {
var that = this;
/*1. */
var angleList = this.transformAngle(data);
/*2. */
var startAngle = 0;
angleList.forEach(function (item, i) {
/* */
var endAngle = startAngle + item.angle;
that.ctx.beginPath();
that.ctx.moveTo(that.x0, that.y0);
that.ctx.arc(that.x0, that.y0, that.radius, startAngle, endAngle);
var color = that.ctx.fillStyle = that.getRandomColor();
that.ctx.fill();
/* */
/* */
that.drawTitle(startAngle, item.angle, color , item.title);
/* */
that.drawDesc(i,item.title);
startAngle = endAngle;
});
};
PieChart.prototype.drawTitle = function (startAngle, angle ,color , title) {
/*1. */
/*2. */
/*3. */
/*4. */
/*5. */
/*5.1 + */
/*5.2 + */
/*5.3 outX = x0 + cos(angle) * ( r + outLine)*/
/*5.3 outY = y0 + sin(angle) * ( r + outLine)*/
/* */
var edge = this.radius + this.outLine;
/*x */
var edgeX = Math.cos(startAngle + angle / 2) * edge;
/*y */
var edgeY = Math.sin(startAngle + angle / 2) * edge;
/* */
var outX = this.x0 + edgeX;
var outY = this.y0 + edgeY;
this.ctx.beginPath();
this.ctx.moveTo(this.x0, this.y0);
this.ctx.lineTo(outX, outY);
this.ctx.strokeStyle = color;
/* */
/* X0 */
/* X0 */
/* */
this.ctx.font = '14px Microsoft YaHei';
var textWidth = this.ctx.measureText(title).width ;
if(outX > this.x0){
/* */
this.ctx.lineTo(outX + textWidth,outY);
this.ctx.textAlign = 'left';
}else{
/* */
this.ctx.lineTo(outX - textWidth,outY);
this.ctx.textAlign = 'right';
}
this.ctx.stroke();
this.ctx.textBaseline = 'bottom';
this.ctx.fillText(title,outX,outY);
};
PieChart.prototype.drawDesc = function (index,title) {
/* */
/* */
/* */
/* */
this.ctx.fillRect(this.space,this.space + index * (this.rectH + 10),this.rectW,this.rectH);
/* */
this.ctx.beginPath();
this.ctx.textAlign = 'left';
this.ctx.textBaseline = 'top';
this.ctx.font = '12px Microsoft YaHei';
this.ctx.fillText(title,this.space + this.rectW + 10 , this.space + index * (this.rectH + 10));
};
PieChart.prototype.transformAngle = function (data) {
/* */
var total = 0;
data.forEach(function (item, i) {
total += item.num;
});
/* */
data.forEach(function (item, i) {
var angle = item.num / total * Math.PI * 2;
item.angle = angle;
});
return data;
};
PieChart.prototype.getRandomColor = function () {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return 'rgb(' + r + ',' + g + ',' + b + ')';
};
var data = [
{
title: '15-20 ',
num: 6
},
{
title: '20-25 ',
num: 30
},
{
title: '25-30 ',
num: 10
},
{
title: '30 ',
num: 8
}
];
var pieChart = new PieChart();
pieChart.init(data);
</script>
アニメやってる!!!
画像を描く
- drawImage()
+ drawImage(img,x,y)
- img 、canvas 、video
- x,y
+ drawImage(img,x,y,w,h)
- img 、canvas 、video
- x,y
- w,h ( ， )
+ drawImage(img,x,y,w,h,x1,y1,w1,h1)
- img 、canvas 、video
- x,y,w,h
- x1,y1,w1,h1
シーケンスフレームアニメーション
Demo
<canvas width="600" height="400"></canvas>
<script>
var myCanvas = document.querySelector('canvas');
var ctx = myCanvas.getContext('2d');
/*1. */
/*var img = document.createElement('img');
img.src = 'image/01.jpg';*/
/* */
var image = new Image();
/* */
image.onload = function () {
/* */
console.log(image);
/* */
/*3 */
/* */
/* x y*/
//ctx.drawImage(image,100,100);
/*5 */
/* */
/* x y*/
/* */
//ctx.drawImage(image,100,100,100,100);
/*9 */
/* */
/* x y */
/* w h*/
/* x y*/
/* */
ctx.drawImage(image,400,400,400,400,200,200,100,100);
};
/* */
image.src = 'image/02.jpg';
</script>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas = document.querySelector('canvas');
var ctx = myCanvas.getContext('2d');
var image = new Image();
image.onload = function () {
/* */
/* */
var imageWidth = image.width;
var imageHeight = image.height;
/* */
var personWidth = imageWidth/4;
var personHeight = imageHeight/4;
/* */
/* */
var index = 0;
/* */
/* */
var x0 = ctx.canvas.width /2 - personWidth / 2;
var y0 = ctx.canvas.height /2 - personHeight / 2;
ctx.drawImage(image,0,0,personWidth,personHeight,x0,y0,personWidth,personHeight);
setInterval(function () {
index ++;
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
ctx.drawImage(image,index * personWidth,0,personWidth,personHeight,x0,y0,personWidth,personHeight);
if(index >= 3){
index = 0;
}
},1000);
};
image.src = 'image/04.png';
</script>
var Person = function (ctx) {
/* */
this.ctx = ctx || document.querySelector('canvas').getContext('2d');
/* */
this.src = 'image/04.png';
/* */
this.canvasWidth = this.ctx.canvas.width;
this.canvasHeight = this.ctx.canvas.height;
/* */
this.stepSzie = 10;
/* 0 1 2 3 */
this.direction = 0;
/*x */
this.stepX = 0;
/*y */
this.stepY = 0;
/* */
this.init();
};
Person.prototype.init = function () {
var that = this;
/*1. */
this.loadImage(function (image) {
/* */
that.imageWidth = image.width;
that.imageHeight = image.height;
/* */
that.personWidth = that.imageWidth / 4;
that.personHeight = that.imageHeight / 4;
/* */
that.x0 = that.canvasWidth / 2 - that.personWidth / 2;
that.y0 = that.canvasHeight / 2 - that.personHeight / 2;
/*2. */
that.ctx.drawImage(image,
0,0,
that.personWidth,that.personHeight,
that.x0,that.y0,
that.personWidth,that.personHeight);
/*3. */
that.index = 0;
document.onkeydown = function (e) {
if(e.keyCode == 40){
that.direction = 0;
that.stepY ++;
that.drawImage(image);
/* */
}else if(e.keyCode == 37){
that.direction = 1;
that.stepX --;
that.drawImage(image);
/* */
}else if(e.keyCode == 39){
that.direction = 2;
that.stepX ++;
that.drawImage(image);
/* */
}else if(e.keyCode == 38){
that.direction = 3;
that.stepY --;
that.drawImage(image);
/* */
}
}
});
}
/* */
Person.prototype.loadImage = function (callback) {
var image = new Image();
image.onload = function () {
callback && callback(image);
};
image.src = this.src;
};
/* */
Person.prototype.drawImage = function (image) {
this.index ++;
/* */
this.ctx.clearRect(0,0,this.canvasWidth,this.canvasHeight);
/* */
/* x */
/* y */
this.ctx.drawImage(image,
this.index * this.personWidth,this.direction * this.personHeight,
this.personWidth,this.personHeight,
this.x0 + this.stepX * this.stepSzie ,this.y0 + this.stepY * this.stepSzie,
this.personWidth,this.personHeight);
/* 0*/
if(this.index >= 3){
this.index = 0;
}
};
new Person();
</script>
<canvas width="600" height="400"></canvas>
<script>
var myCanvas = document.querySelector('canvas');
var ctx = myCanvas.getContext('2d');
//ctx.translate(100,100);
//ctx.scale(0.5,1);
//ctx.rotate(Math.PI/6);
var startAngle = 0;
ctx.translate(150,150);
setInterval(function () {
startAngle += Math.PI/180;
ctx.rotate(startAngle);
ctx.strokeRect(-50,-50,100,100);
},500);
</script>
もし不足があれば、皆さんの批判と指摘を歓迎して、この文章がみんなに助けをもたらすことができることを望みます!!!