几个图形学的小例子(canvas实现)
画个钻石(其实可以通过坐标系的旋转来做,更简单,当时没想到)
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() |
图形学上机—一棵树
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(); |
林龙博客
2016年5月7日 10:48
canvas 可以做许多东西啊
奋斗的承诺
2016年5月8日 09:03
是的
奇虎分享网
2016年8月24日 16:45
今天才发现你的博客,连着看了几篇呢