<html>
<head >
<script type= "text/javascript">
//第1，2，3，4象限的坐标。
var first = [];
var second = [];
var third = [];
var four = [];
var testx = [1,2,3,4,5];
var timer2 ;
//画心形图的类型//这个功能不想做了。。。
var paintType = 1;
//第一种画法的时间器
var firstTimer;
//第一种画法的坐标的数组
var firstLocation;
//第二种画法的时间器
var secondTimer1;
var secondTimer2;
var secondTimer3;
var secondTimer4;
//第二种画法的坐标的数组
var secondLocation1;
var secondLocation2;
var secondLocation3;
var secondLocation4;
//第三种画法的坐标的数组
var thirdLocation1;
var thirdLocation2;
var thirdLocation3;
var thirdLocation4;
function test(){
//测试能不能像erlang一样的使用方法名
//console.log(Math.pow(2,3))
//测试3!^8
// console.log(Math.pow(8,1/3));
//测试根据x值获得的方法。
// console.log(getHeartUpLocal(0));
// console.log(getHeartDownLocal(0));
//测试遍历所有的位置的方法。
// var localtion=[[12,12],[23,50],[99,60]];
// var can = $$('heart');
// var cans = can.getContext('2d');
// lineToAllLocal(cans,localtion);
// cans.lineWidth=3;
// cans.strokeStyle = 'red';
// cans.stroke();
//测试数组的长度
// var a = [1,2,3];
// console.log(a.length);
// console.log(a[1]);
//测试出现空隙的原因
// console.log(getHeartUpLocal(0));
// console.log(getHeartDownLocal(0));
//测试小数的问题
// console.log(1.0 + 2.01);
//测试如何分步骤的画出图形
// paintALine("can",[10,10],[20,20]);
//测试分时画图
//paintALine("can",[10,10],[20,20]);
//测试每隔1秒打印一个数字
// testpaintNum();
//测试两个数组直接能否相加
// testListPlusList();
//
//clearCan();
}
//测试两个数组直接能否相加
function testListPlusList(){
var l1 = [1,3];
var l2 = [3,4];
console.log(l1.concat(l2));
}
//测试每隔5秒打印一个数字
function testpaintNum(){
var timer1 = window.setInterval( "testpaintNum1()" ,1000);
timer2 = timer1;
}
function testpaintNum1(){
console.log( "=========="+testx);
if(testx.length>0)
{
console.log("========" +testx[0]);
F = testx.shift();
console.log(testx);
} else{
clearInterval(timer2);
console.log( "over");
}
}
function $$(id){
return document.getElementById(id);
}
//给定一个id，画两个点成直线
function paintALine(can,start,end){
var can = $$(can);
var cans = can.getContext('2d' );
cans.moveTo(start[0], start[1]); //第一个起点
cans.lineTo(end[0], end[1]); //第二个点
cans.lineWidth=3;
cans.strokeStyle = 'red';
cans.stroke();
}
function pageLoad(){
var can = $$('can' );
var cans = can.getContext('2d' );
cans.moveTo(20,30); //第一个起点
cans.lineTo(21,31); //第二个点
// cans.lineTo(220,60);//第三个点（以第二个点为起点）
cans.lineWidth=3;
cans.strokeStyle = 'red';
cans.stroke();
}
//
function paintMyHeart (can1) {
var can = $$(can1);
var cans = can.getContext('2d' );
lineToAllLocal(cans,first);
lineToAllLocal(cans,second);
lineToAllLocal(cans,third);
lineToAllLocal(cans,four);
cans.lineWidth=3;
cans.strokeStyle = 'red';
cans.stroke();
}
//遍历所有的坐标,并画出坐标
function lineToAllLocal(cans,localtion){
var local = [];
for(var i = 0; i < localtion.length; i++){
local = localtion[i];
if (i==0) {
cans.moveTo(local[0],local[1]);
} else{
cans.lineTo(local[0],local[1]);
}
}
}
//画心
//下面的是一个极坐标方程
//r=a(1-sinθ）
//下面的是一个二元方程
//x^2+(y-3!^x^2)^2=1
//选择下面这个比较好实现的。
function paintHeart(){
//第一步将所有象限的坐标全部计算出来。
getHeartLocal(1,103,153,100);
getHeartLocal(2,103,153,100);
// console.log(first);
// console.log(second);
// console.log(third);
// console.log(four);
//第二步画画。
paintMyHeart( "heart");
}
//x,y,th表是横坐标偏移量、纵坐标偏移量、放大倍数
function getHeartLocal(type,x,y,th){
var local = 0;
switch (type){
case 1 ://第一象限的数据//第四象限的数据
for (var i = 0 ; i <= 1.0;) {
local = getHeartUpLocal(i);
//将这个坐标放入象限中。
first.push([i*th+x,local*th+y]);
four.push([-i*th+x,local*th+y]);
//测试小数点的bug。
// if((i<=1 && i>=0.96) || (i>=0 && i<= 0.04) ){
// console.log(i*th+x,local*th+y);
// }
//最后将i加0.02;
i = Math.round(i*1000)/1000 + 0.02;
};
break;
case 2 ://第二象限的数据//第三象限的数据
for (var i = 0 ; i <= 1.0;) {
local = getHeartDownLocal(i);
//将这个坐标放入象限中。
second.push([i*th+x,local*th+y]);
third.push([-i*th+x,local*th+y]);
//最后将i加0.02;
i = Math.round(i*1000)/1000 + 0.02;
};
break;
default :
break;
}
}
//根据x值获得Y值,获得X轴上的点
function getHeartUpLocal(x){
//+or- 2!^(1-x^2) +3!^(x^2) = y
//这个公式是心形的倒序图形，所以需要翻转。即添加了一个"-"
return -(Math.pow(1 - Math.pow(x,2),1/2) + Math.pow(Math.pow(x,2), 1/3));
}
//根据x值获得Y值,获得X轴下的点
function getHeartDownLocal(x){
//+or- 2!^(1-x^2) +3!^(x^2) = y
//这个公式是心形的倒序图形，所以需要翻转。即添加了一个"-"
return -(Math.pow(Math.pow(x,2), 1/3) - Math.pow(1 - Math.pow(x,2),1/2));
}
//画出心形图，按照类型画。
function paintMyHeart2(){
//console.log(paintType);
switch (paintType){
case 1 ://第一种画法：从第一象限到第四象限..依次走过
firstLocation = first.concat(second.reverse()).concat(third).concat(four.reverse());
var timer1 = window.setInterval( "firstpaintMyHeart();" ,100);
firstTimer = timer1;
paintType ++;
break;
case 2 ://每个象限风别走，都是顺时钟走
clearCan(); //这个功能还没有实现完。。。。。
secondLocation1 = first;
secondLocation2 = second.reverse();
secondLocation3 = third;
secondLocation4 = four.reverse();
var timer1 = window.setInterval( "secondpaintMyHeart1();" ,100);
var timer2 = window.setInterval( "secondpaintMyHeart2();" ,100);
var timer3 = window.setInterval( "secondpaintMyHeart3();" ,100);
var timer4 = window.setInterval( "secondpaintMyHeart4();" ,100);
secondTimer1 = timer1;
secondTimer2 = timer2;
secondTimer3 = timer3;
secondTimer4 = timer4;
paintType ++;
break;
default :
break;
}
}
function testResetInterval(){
console.log( "======");
}
//清除can对象的内容，或者重置内容
function clearCan(){
var c=$$("can" );
var ctx=c.getContext("2d" );
ctx.fillStyle= "white";
ctx.fillRect(0,0,400,300);
ctx.clearRect(0,0,400,300);
}
//第一种画法的计时器做的内容,这种代码复用效果不好，主要是设计逻辑结构时没有设计好。现在将就一下了。。
function firstpaintMyHeart(){
if(firstLocation.length >1){
var start = firstLocation.shift();
var end = firstLocation[0];
paintALine( "can",start,end);
} else{
clearInterval(firstTimer);
}
}
//第二种画法的四个计时器做的内容,第一个计时器的内容,这种代码复用效果不好，主要是设计逻辑结构时没有设计好。现在将就一下了。。
function secondpaintMyHeart1(){
if(secondLocation1.length >1){
var start = secondLocation1.shift();
var end = secondLocation1[0];
paintALine( "can",start,end);
} else{
clearInterval(secondTimer1);
}
}
//第二种画法的四个计时器做的内容,第二个计时器的内容,这种代码复用效果不好，主要是设计逻辑结构时没有设计好。现在将就一下了。。
function secondpaintMyHeart2(){
if(secondLocation2.length >1){
var start = secondLocation2.shift();
var end = secondLocation2[0];
paintALine( "can",start,end);
} else{
clearInterval(secondTimer2);
}
}
//第二种画法的四个计时器做的内容,第三个计时器的内容,这种代码复用效果不好，主要是设计逻辑结构时没有设计好。现在将就一下了。。
function secondpaintMyHeart3(){
if(secondLocation3.length >1){
var start = secondLocation3.shift();
var end = secondLocation3[0];
paintALine( "can",start,end);
} else{
clearInterval(secondTimer3);
}
}
//第二种画法的四个计时器做的内容,第四个计时器的内容,这种代码复用效果不好，主要是设计逻辑结构时没有设计好。现在将就一下了。。
function secondpaintMyHeart4(){
if(secondLocation4.length >1){
var start = secondLocation4.shift();
var end = secondLocation4[0];
paintALine( "can",start,end);
} else{
clearInterval(secondTimer4);
}
}
</script>
</head >
<body onload="paintHeart();">
<canvas id= "can" width ="400px" height="300px" >4 </canvas>
<canvas id= "heart" width ="400px" height="300px" >4 </canvas>
<!-- 做一个丘比特的爱心图 -->
<canvas id= "cupid" width ="400px" height="300px" >4 </canvas>
<br>
<input type= "button" onclick ="test()" value="test" ></input>
<input type= "button" onclick ="paintMyHeart2()" value="paintMyHeart2" ></input>
</body >
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
