Блог

Я новичок в HTML5, Jquery / JavaScript. Я пытаюсь создать холст (что-то вроде приложения Windows paint), и я смотрю на примеры функций / кода других пользователей, чтобы узнать, что происходит, и попытаться воссоздать его.

 $(function(){
var paint = new Paint($('#surface').get(0));

// Setup line template
var templateLine = new Paint($('#toolbar #line').get(0), {'readonly': true});
templateLine.shape = new Line([10, 10], [50, 50]);
templateLine.place(templateLine.shape);
 

Я не уверен, что здесь происходит. Я знаю, что этот новый Paint не является внутренней встроенной функцией. Что это?
Во-вторых, в чем разница между этим и

 $( document).ready(function(){
var canvas = $("#canvas").get(0);
if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        // Choose a color
        ctx.fillStyle = "black";
        ctx.strokeStyle = color;
        ctx.fillRect(0, 0, 50, 50);
    } else {
        // Browser doesn't support CANVAS
    }
});
 

Помогите!!!

Ну, во-первых, код, который вы просматриваете в начале вашего вопроса, вероятно, использовал какую-то библиотеку canvas или API, но это не ванильный HTML5 Canvas API, что делает его полностью отличным от того, что вы написали ниже, даже если они имеют одинаковый результат (хотя это не выглядиткак они делают).

Во-вторых, color не определено, поэтому, если это не определено в вашем коде где-то еще, ваш код не будет работать. В противном случае ваш код нарисует черный прямоугольник в углу холста с цветом обводки, каким бы он ни color был.