HTML5 Объект Canvas ориентирован на объект

Привет, я пытаюсь создать диаграмму запасов с использованием холста html5, сначала я решил создать объект с различными методами, но не могу заставить его работать. Сформирован бар объект не появляетсяHTML5 Объект Canvas ориентирован на объект

Это мой код:

<!DOCTYPE html> 
<html> 
<body> 

<canvas id="myCanvas" width="1024" height="600" style="border:3px solid #d3d3d3;"> 
Your browser does not support the HTML5 canvas tag.</canvas> 

<script> 
var context = document.getElementById("myCanvas").getContext("2d"); 


function Bar(time,open,high,low,close,dir){ 
    vertcord=time 
    openC=open 
    highC=high 
    lowC=low 
    closeC=close 
    line_width=8 
    bar_col='#ff0000' 

    if (dir==1){ 
    bar_col='#ace600' 
    } 

    this.moveTo(vertcord,highC); 
    this.lineTo(vertcord,lowC); 
    this.moveTo(vertcord-line_width/2,closeC); 
    this.lineTo(vertcord+30,closeC); 
    this.lineWidth = line_width 
    this.strokeStyle = bar_col; 
    this.stroke(); 


} 

for (i=0; i < 300; i++) { 
    tempShape = new Bar(450+i,0,200,100,150,1); 
    tempShape.drawToContext(context); 
} 

</script> 
</body> 
</html>

источник

2017-02-08 Riggun

Для функции «Контекст» (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) вместо функции «this» в конструкторе вам нужен [контекст отображения]. – Teemu

Bar.drawToContext() даже не определен, не так ли? –

Но Bar должен быть объектом, который я улучшу позже другими функциями и т. Д. – Riggun

function Bar(time,open,high,low,close,dir){ 
 
    this.vertcord = time; 
 
    this.openC = open; 
 
    this.highC = high; 
 
    this.lowC = low; 
 
    this.closeC = close; 
 
    this.line_width = 8; 
 
    this.bar_col = '#ff0000'; 
 

 
    if (dir ==1) { 
 
    \t this.bar_col = '#ace600'; 
 
    } 
 
\t \t 
 
    this.drawToContext = function(ctx) { 
 
\t ctx.moveTo(this.vertcord, this.highC); 
 
    \t ctx.lineTo(this.vertcord, this.lowC); 
 
    \t ctx.moveTo(this.vertcord-this.line_width/2,this.closeC); 
 
    \t ctx.lineTo(this.vertcord+30,this.closeC); 
 
    \t ctx.lineWidth = this.line_width 
 
    \t ctx.strokeStyle = this.bar_col; 
 
    \t ctx.stroke(); 
 
    } 
 
} 
 

 
var context = document.getElementById("myCanvas").getContext("2d"); 
 

 
for (i=0; i < 300; i++) { 
 
    tempShape = new Bar(450+i,0,200,100,150,1); 
 
    tempShape.drawToContext(context); 
 
}

<canvas id="myCanvas" width="1024" height="600" style="border:3px solid #d3d3d3;"> 
 
Your browser does not support the HTML5 canvas tag.</canvas>

Я думаю, что это, как это предполагается be.You лучше прочитать a tutorial как правильно реализовать объектно-ориентированный шаблон в JavaScript. И узнайте, что это означает в JavaScript.

источник

2017-02-08 07:54:28

Большое спасибо, да, я только начинаю изучать ООП в JS – Riggun

Несколько дней, пытаясь сделать независимый цвет для каждого объекта, никакого прогресса, даже если я создаю объекты jwithout loop только tempShape1, tempShape2, а затем попытаюсь изменить цвет конкретная форма, например tempShape1.bar_col = '# ace600', она изменит цвет для всех фигур. Я не могу понять, почему это происходит, потому что другие параметры формы: сердечники, переменные и т. Д. Отлично работают. Нет проблем с изменением позиций и формы – Riggun

HTML5 Объект Canvas ориентирован на объект

ответ

Смежные вопросы