39,084
社区成员
发帖
与我相关
我的任务
分享
<body>
<canvas id="myCanvas" width="1080" height="600" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
function createTest(context,star,end,width,height,fillColor,strokeColor,lineW){
context.lineWidth = lineW;
context.beginPath();
context.moveTo(star,end+width);
context.lineTo(end+width,end+width);
//context.lineTo(star+width,end+height);
//context.lineTo(star,end+height);
context.closePath();
context.fillStyle = fillColor;
context.strokeStyle = strokeColor;
context.fill();
context.stroke();
}
window.onload = function(){
<c:forEach items="${list}" var="li">
var star="${li.cid}";
var end="${li.eid}";
var type="${li.type}";
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
createTest(context,star/30,end/30,50,0,"red","#665588",5);
</c:forEach>
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="myCanvas" width="1080" height="600" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
function createTest(context,star,end,width,height,fillColor,strokeColor,lineW){
context.lineWidth = lineW;
context.beginPath();
//height值控制换行
context.moveTo(star,end+width+height);
context.lineTo(end+width,end+width+height);
context.closePath();
context.fillStyle = fillColor;
context.strokeStyle = strokeColor;
context.fill();
context.stroke();
}
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var arrays = [
{id:1, star:34, end:54, type:1},
{id:2, star:35, end:53, type:2},
{id:3, star:37, end:50, type:2},
{id:4, star:30, end:88, type:1},
{id:5, star:32, end:87, type:2},
{id:6, star:35, end:80, type:2},
{id:7, star:31, end:68, type:2},
{id:8, star:60, end:96, type:1},
{id:9, star:65, end:88, type:2},
{id:10, star:62, end:90, type:2}
];
for(var i=0; i<arrays.length; i++){
var star = arrays[i].star;
var end = arrays[i].end;
var type = arrays[i].type;
if(type == 2){
//height值为0,即不换行
createTest(context,star/30,end/30,50,0,"red","#665588",5);
}else{
//height值设置为50,换行下移50
createTest(context,star/30,end/30,50,50,"red","#665588",5);
}
}
}
</script>
</body>
</html>