几个图形学的小例子（canvas实现）

作者: Rememberautumn 分类: html5,JavaScript,Web前端 发布时间: 2016-04-26 20:18 阅读: 3,430

微信小程序转支付宝小程序命令行工具

wordpress转APP方案

mui + vue单文件组件开发， 热更新脚手架

画个钻石（其实可以通过坐标系的旋转来做，更简单，当时没想到）

eCode_canvas_index_ht

 

 

 

 

 

 

 

 

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.width = 600;
context.fillStyle = "#000";
context.beginPath();
context.translate(400,400);
var bj = 200;
var pi =3.1415;
var point=[];
for (var i = 0; i < 8; i++) {
point.push({
x:parseInt(Math.sin(pi*i/4)*200),
y:parseInt(Math.cos(pi*i/4)*200)
});
}
  for (var i = 0; i < 8; i++) {
   for (var j = i+1; j < 8; j++) {
   context.moveTo(point[i].x,point[i].y);
   context.lineTo(point[j].x,point[j].y);
   }
  }
  context.stroke()

图形学上机—一棵树

FireShot Pro Screen Capture #004 - '树' - _H__sublimeCode_canvas_tree_ht

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
c.width=800;
c.height=800;
c.fillStyle = '#FFF';
c.beginPath();
// function tree(begin,length,w,i) {
// console.log(begin)
// length=parseInt(length*0.6);
// if (length<10) {
// return;
// }
// c.moveTo(begin.x,begin.y);
// if (w) {
// i++;
// x= parseInt(begin.x-length*Math.cos(3.14/6*i));
// y=parseInt(begin.y-length*Math.sin(3.14/6*i));
// console.log('x'+x+"y"+y);
// c.lineTo(x,y);
// tree({x:parseInt(begin.x-length*Math.cos(3.14/6*i)*0.4),y:parseInt(begin.y-length*Math.sin(3.14/6*i)*0.4)},length*0.68,1,i-3);
 
// tree({x:parseInt(begin.x-length*Math.cos(3.14/6*i)*0.4),y:parseInt(begin.y-length*Math.sin(3.14/6*i)*0.4)},length*0.68,0,i+1);
 
// }else{
// i+=1;
// x= parseInt(begin.x+length*Math.cos(3.14/6*i));
// y=parseInt(begin.y-length*Math.sin(3.14/6*i));
// console.log('x'+x+"y"+y);
// c.lineTo(x,y);
// // tree({x:parseInt(begin.x+length*Math.cos(3.14/6*i)*0.4),y:parseInt(begin.y-length*Math.sin(3.14/6*i)*0.4)},length*0.68,1,i+-11);
 
// // tree({x:parseInt(begin.x+length*Math.cos(3.14/6*i)*0.4),y:parseInt(begin.y-length*Math.sin(3.14/6*i)*0.4)},length*0.68,0,i-3);
// }
// }
// tree({x:400,y:500},600,1,0)
// tree({x:400,y:500},600,0,0)
function getxy(x,y,length,angle) {
var endx = parseInt(length*Math.cos(angle)+x);
var endy = parseInt(length*Math.sin(angle)+y);
return {x:endx,y:endy};
}
var trees =function (x,y,length,angle) {
this.x = x;
this.y = y;
this.endx = '';
this.endy = '';
this.length = length;
this.angle = angle;
this.point = [];
};
trees.prototype.getEnd = function() {
this.endx = this.length*Math.cos(this.angle)+this.x;
this.endy = this.length*Math.sin(this.angle)+this.y;
};
trees.prototype.getPoint = function () {
var add = this.length*0.318;
var rootlenth = 0;
var length = this.length*0.5;
for(var i=0;rootlenth+add*0.718+10<this.length;i++){
rootlenth +=add;
add*=0.718;
var point = getxy(this.x,this.y,rootlenth,this.angle);
console.log(point)
length = length*0.7
this.point.push({x:point.x,y:point.y,length:length,angle:(this.angle-Math.PI/3)});
this.point.push({x:point.x,y:point.y,length:length,angle:this.angle+Math.PI/3});
}
};
trees.prototype.init = function () {
this.getEnd();
this.getPoint();
};
 
function draw(x,y,length,angle) {
var tree = new trees(x,y,length,angle);
tree.init();
c.moveTo(x,y);
c.lineTo(tree.endx,tree.endy);
tree.point.forEach(function (point) {
draw(point.x,point.y,point.length,point.angle);
});
// console.log(tree);
}
draw(400,500,400,Math.PI*3/2);
c.stroke();

填充图形–（做法有点蠢）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
$=function (str) {
return document.querySelector(str);
}
var canvas = $('#canvas');
var c = canvas.getContext('2d');
var line = [{
begin:{
x:100,
y:100
},
end:{
x:100,
y:200
}
},{
begin:{
x:100,
y:200
},
end:{
x:150,
y:150
}
},{
begin:{
x:150,
y:150
},
end:{
x:200,
y:200
}
},
{
begin:{
x:200,
y:200
},
end:{
x:200,
y:100
}
},
{
begin:{
x:200,
y:100
},
end:{
x:100,
y:100
}
},
 
];
var draw = [];
for(var i=1;i<=600;i++){
draw[i] = [];
for (var j = 1; j <=600; j++) {
draw[i][j]=false;
}
}
line.forEach(function (line) {
var k = (line.begin.y-line.end.y)/(line.begin.x-line.end.x);
var add = line.begin.x>line.end.x?-1:1;
console.log(add+'s'+k)
var x = line.begin.x;
var y=line.begin.y;
while(x!=line.end.x){
y+=k;
draw[x][parseInt(y)] = !draw[x][parseInt(y)];
x+=add;
}
});
// console.log(draw)
c.beginPath();
for (var i = 1; i <=600; i++) {
var bool = false;
for (var j = 1; j <= 600; j++) {
if (draw[i][j]&&bool) {
bool = false;
c.lineTo(i,j);
}else if (draw[i][j]) {
bool = true;
c.moveTo(i,j);
}
}
}
c.stroke();

 

如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！

3条评论
添加新评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

更多阅读
标签云
Ajax app c c++ css curl git html5 java JavaScript javaScript jQuery MUI mui学习 MUI框架学习 MUI框架教程 mysql php poj sae sql ubuntu uva vue weex wordpress wordpress for sae ytu ytuoj 刘汝佳 刷新 并查集 并行计算 总结 数据结构 水题 烟台大学 烟大 生活 第三极 算法入门经典 编码 编程 计算机与控制工程学院 许巍