目录
canvas绘制矩形
<body>
<canvas id="demoCanvas" width="500" height="500">
<p>请使用支持HTML5的浏览器查看本实例</p>
</canvas>
<!---下面将演示一种绘制矩形的demo--->
<script type="text/javascript">
//第一步：获取canvas元素
var canvasDom = document.getElementById("demoCanvas");
//第二步：获取上下文
var context = canvasDom.getContext('2d');
//第三步：指定绘制线样式、颜色
context.strokeStyle = "red";
//第四步：绘制矩形，只有线。内容是空的
context.strokeRect(10, 10, 190, 100);
//以下演示填充矩形。
context.fillStyle = "blue";
context.fillRect(110,110,100,100);
</script>
</body>
事件绑定：
$("#minus").on('mousedown.test', function() {
if(m_i_draftsign == 1 && m_f_draft.toFixed(1) > 0) { /*当DRAFT事件触发时*/
m_f_draft = m_f_draft - 0.1;
$(".draftnumberstyle").html(m_f_draft.toFixed(1));
$(".modedraftnumber").html("DRAFT:" + m_f_draft.toFixed(1) + " m");
m_f_depth = (m_f_draft + m_f_sensordepth).toFixed(1);
$(".depthword").html(m_f_depth);
clearTimeout(m_i_drafttime);
m_i_drafttime = setTimeout(function() {
$(".draftpopupstyle").hide();
m_i_draftsign = 0; /*5秒后draft事件结束*/
}, m_number5_secs);
}
});
事件解绑：
$("#minus").off("mousedown.test");
on()和off()后面的mousedown只是个标识。
在绑定事件中如果嵌套绑定事件的话，需要重新加载时之后，解绑，否则会出现多次绑定情况
红色波线
/*红色波线--start*/
var obj_canvaswave = document.getElementById("waveline"); /*拿到画布对象引用*/
var ctx = obj_canvaswave.getContext("2d"); /*我们需要一个画布的"2d"上下文来进行绘制我们的图像*/
var wave_height = window_height*20/950;
var wave_width = window_width*438/1900;
$("#waveline").css({"height":"wave_height","width":"wave_width"});
var ywave = 0;
self.setInterval(wave, 100); //循环执行
function wave() { //宽1px最长18px,最短5px
obj_canvaswave.width = wave_width;
for(var i = 0; i < 438; i++) {
ywave = 18 * Math.random();
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = '#CE0000';
ctx.moveTo(i, 0);
ctx.lineTo(i, ywave);
ctx.stroke();
}
}
/*红色波线--end*/
渐进式绿色折线
var obj_canvaswavegreen = document.getElementById("wavelinegreen"); /*拿到画布对象引用*/
var ctxgreen = obj_canvaswavegreen.getContext("2d"); /*我们需要一个画布的"2d"上下文来进行绘制我们的图像*/
var wavelinegreen_height = window_height*500/950;
var wavelinegreen_width = window_width*30/19; /*绿色光柱长度与滚动星星画布长度一致*/
obj_canvaswavegreen.height = wavelinegreen_height;
obj_canvaswavegreen.width = wavelinegreen_width;
var ywavegreen = 0;
var ywavegreen1 = 0;
var ywavegreen2 = 0;
var greenwaterlevelratio = 0; /*刻度高度与绿色光柱位置比率*/
var greenwaveposition = 0; /*绿色光柱所在刻度位置*/
var greenwaveinix = 0; /*绿色光柱起笔点坐标*/
var greenwaveleftpositionx = 0; /*绿色波线左属性坐标*/
var mqleftpositionx = 0; /*绿色波线左属性坐标*/
var greenwaveleftoffset = 0;
var pre_greenwaveposition=0; /*中间量临时存储y轴坐标*/
var step_greenwaveposition=0; /*起步y轴坐标*/
function wavegreenauto() { /*水底随水深数变化而变化*/
if(m_i_gainlevel >= 4 && m_i_rangelevel >= 4) {
$("#mq")[0].start();
mqleftpositionx = $("#mq").position().left;
m_f_sensordepth = (Math.random() * (98.9 - 19.1 + 1) + 20.1).toFixed(1); /*带有一位小数的20.1~100.9的随机数*/
$(".depthword").html(m_f_sensordepth);
rangeheight = window_height * 500 / 950;
greenwaterlevelratio = m_f_sensordepth/100;
greenwaveposition = rangeheight*greenwaterlevelratio - window_height*20/950;
step_greenwaveposition = greenwaveposition;
ctxgreen.lineWidth = 4;
ctxgreen.strokeStyle = '#7fff14';
ctxgreen.moveTo(greenwaveinix, greenwaveposition);
greenwaveinix +=500;
ctxgreen.lineTo(greenwaveinix, greenwaveposition);
ctxgreen.stroke();
self.setInterval(function() {
greenwaveleftpositionx = $("#wavelinegreen").position().left;
greenwaveleftoffset = $("#wavelinegreen")[0].offsetLeft;
if ((greenwaveleftpositionx - mqleftpositionx) < (greenwaveleftoffset+5)) { /*判断绿色线的左坐标最小时候,也是画布从头开始跑时候,需要重置画布*/
obj_canvaswavegreen.width = wavelinegreen_width;
greenwavechangetime = 0;
greenwaveinix = 0;
rangeheight = window_height * 500 / 950;
greenwaterlevelratio = m_f_sensordepth/100;
greenwaveposition = rangeheight*greenwaterlevelratio - window_height*20/950;
step_greenwaveposition = greenwaveposition;
ctxgreen.lineWidth = 4;
ctxgreen.strokeStyle = '#7fff14';
ctxgreen.moveTo(greenwaveinix, greenwaveposition);
greenwaveinix +=500;
ctxgreen.lineTo(greenwaveinix, greenwaveposition);
ctxgreen.stroke();
}
}, 100);
self.setInterval(function() { /*水深10秒变一次*/
pre_greenwaveposition = step_greenwaveposition;
m_f_sensordepth = (Math.random() * (98.9 - 19.1 + 1) + 20.1).toFixed(1); /*带有一位小数的20.1~100.9的随机数*/
$(".depthword").html(m_f_sensordepth);
greenwaterlevelratio = m_f_sensordepth/100;
greenwaveposition = rangeheight*greenwaterlevelratio - window_height*20/950;
},10000);
self.setInterval(function() {
wavegreen();
/*$(".waveredlinestyle").css("top", (greenwaveposition - window_height*20/950)+"px");*/
/*需要去除绿色光柱宽度的问题*/
}, 100); /*屏幕传感器到海底水深数字*/
}
}
绿色光柱(海底模拟)
/*绿色光柱(海底模拟)画布取得--start*/
var obj_canvaswavegreen = document.getElementById("wavelinegreen"); /*拿到画布对象引用*/
var ctxgreen = obj_canvaswavegreen.getContext("2d"); /*我们需要一个画布的"2d"上下文来进行绘制我们的图像*/
var wavelinegreen_height = window_height*640/950;
var wavelinegreen_width = window_width*30/19; /*绿色光柱长度与滚动星星画布长度一致*/
obj_canvaswavegreen.height = wavelinegreen_height;
obj_canvaswavegreen.width = wavelinegreen_width;
var ywavegreen = 0;
var ywavegreen1 = 0;
var ywavegreen2 = 0;
var greenwaveposition = 0;
var greenwaveinix = 0;
var greenwaterlevelratio = 0;
var greenwaveleftpositionx = 0; /*绿色波线左属性坐标*/
var mqleftpositionx = 0; /*绿色波线左属性坐标*/
var greenwaveleftoffset = 0;
/*绿色光柱(海底模拟)画布取得--end*/
/*绿色光柱(海底模拟)--start*/
function wavegreenauto() {
if(m_i_gainlevel >= 4 && m_i_rangelevel >= 4) {
$("#mq")[0].start();
rangeheight = window_height * 500 / 950;
m_f_sensordepth = (Math.random() * (98.9 - 19.1 + 1) + 20.1).toFixed(1); /*带有一位小数的20.1~100.9的随机数*/
greenwaterlevelratio = m_f_sensordepth / 100;
greenwaveposition = rangeheight * greenwaterlevelratio - window_height * 40 / 950;
$(".depthword").html(m_f_sensordepth);
ywavegreen2 = window_height * 30 / 950;
ctxgreen.beginPath();
ctxgreen.lineWidth = 1;
ctxgreen.strokeStyle = '#7fff14';
ctxgreen.moveTo(greenwaveinix, greenwaveposition);
for(var i = 0; i < 1020; i++) {
ywavegreen = window_height * 18 / 950 * Math.random();
ywavegreen1 = ywavegreen2 + ywavegreen /*30是中间不动部分*/
ctxgreen.lineTo(greenwaveinix + i, greenwaveposition + ywavegreen1);
ctxgreen.lineTo(greenwaveinix + i, greenwaveposition + ywavegreen);
ctxgreen.stroke();
}
greenwaveinix += 1020;
self.setInterval(function() { /*重置画布操作*/
greenwaveleftpositionx = $("#wavelinegreen").position().left;
greenwaveleftoffset = $("#wavelinegreen")[0].offsetLeft;
if((greenwaveleftpositionx - mqleftpositionx) < (greenwaveleftoffset + 5)) { /*判断绿色线的左坐标最小时候,也是画布从头开始跑时候,需要重置画布*/
obj_canvaswavegreen.width = wavelinegreen_width;
greenwaveinix = 0;
rangeheight = window_height * 500 / 950;
greenwaterlevelratio = m_f_sensordepth / 100;
greenwaveposition = rangeheight * greenwaterlevelratio - window_height * 20 / 950;
ywavegreen2 = window_height * 30 / 950;
ctxgreen.beginPath();
ctxgreen.lineWidth = 1;
ctxgreen.strokeStyle = '#7fff14';
ctxgreen.moveTo(greenwaveinix, greenwaveposition);
for(var i = 0; i < 900; i++) {
ywavegreen = window_height * 18 / 950 * Math.random();
ywavegreen1 = ywavegreen2 + ywavegreen /*30是中间不动部分*/
ctxgreen.lineTo(greenwaveinix + i, greenwaveposition + ywavegreen1);
ctxgreen.lineTo(greenwaveinix + i, greenwaveposition + ywavegreen);
ctxgreen.stroke();
}
greenwaveinix += 900;
}
}, 100);
self.setInterval(function() { /*水深变化*/
m_f_sensordepth = (Math.random() * (98.9 - 19.1 + 1) + 20.1).toFixed(1); /*带有一位小数的20.1~100.9的随机数*/
greenwaterlevelratio = m_f_sensordepth / 100;
greenwaveposition = rangeheight * greenwaterlevelratio - window_height * 40 / 950;
$(".depthword").html(m_f_sensordepth);
wavegreen();
greenwaveinix += 480;
}, 20000); /*屏幕传感器到海底水深数字*/
}
}
function wavegreen() {
ywavegreen2 = window_height * 30 / 950;
ctxgreen.beginPath();
ctxgreen.lineWidth = 1;
ctxgreen.strokeStyle = '#7fff14';
ctxgreen.moveTo(greenwaveinix, greenwaveposition);
for(var i = 0; i < 480; i++) {
ywavegreen = window_height * 18 / 950 * Math.random();
ywavegreen1 = ywavegreen2 + ywavegreen /*30是中间不动部分*/
ctxgreen.lineTo(greenwaveinix + i, greenwaveposition + ywavegreen1);
ctxgreen.lineTo(greenwaveinix + i, greenwaveposition + ywavegreen);
ctxgreen.stroke();
}
}
/*绿色光柱(海底模拟)--end*/
691
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
