不知道为什么一直显示不出来，还报错？-慕课网

不知道为什么一直显示不出来，还报错？

来源：2-2 绘制直线、多边形和七巧板

Lucifershine

2016-10-28 12:32

var trm=new Array([
{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#CCFF33"},
{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#33CCFF"},
{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600}],color:"#FF0000"},
{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#FFFF00"},
{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#9900FF"},
{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#FF77FF"},
{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#FFBB66"}
]);
//标准的画布定义兼容性初始化
window.onload=function(){
var canvas=document.getElementById("canvas");
canvas.width=800;
canvas.height=800;
if (canvas.getContext) {
var ctx=canvas.getContext("2d")
} else{
alert('该浏览器不支持canvas，请您更换浏览器后重试')
}
for (var i=0;i<trm.length;i++) {
draw(trm[i],ctx);
}
function draw(demo,ctx){
ctx.beginPath();
ctx.moveTo(demo.p[0].x,demo.p[0].y);
for (var j=1;j<demo.p.length;j++) {
ctx.lineTo(demo.p[j].x,demo.p[j].y);
}
ctx.fillStyle="demo.color";
ctx.fill();
}

写回答关注

2回答

慕斯卡3531659

2016-11-10 23:57:19

// 七巧板的各个颜色色块
var trm=[
{p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#CCFF33"},
{p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#33CCFF"},
{p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#FF0000"},
{p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#FFFF00"},
{p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#9900FF"},
{p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#FF77FF"},
{p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#FFBB66"}
];
window.onload = function(){
var canvas = document.getElementById('canvas');
canvas.height = 900;
canvas.width = 1024;
var context = canvas.getContext("2d");

for(var i=0;i<trm.length;i++){
draw(trm[i],context);
}
}
function draw(demo,ctx){
ctx.beginPath();
ctx.moveTo(demo.p[0].x,demo.p[0].y);
for(var j=1;j<demo.p.length;j++){
ctx.lineTo(demo.p[j].x,demo.p[j].y);
}
ctx.fillStyle = demo.color;
ctx.fill();
}

0 0
DeadSnow

2016-10-28 15:06:38
1. 你少了一个分号；
2. trm = [] 和 new Array()定义不一样。new Array()是创建一个array 的object。
3. ctx.fillStyle="demo.color";不要加引号
同学你这个基础有点差，要多注意些细节问题。
0 0

炫丽的倒计时效果Canvas绘图与动画基础

学习HTML5中最激动人心的技术Canvas，彻底释放自己的创造力

96775 学习 · 1000 问题

查看课程

相似问题

画布显示不出来，对照了几遍还是不知道错在哪里

回答 4

请问为什么显示不出来

回答 1

回答 1

回答 4

回答 1