Создание элемента canvas с использованием jquery

-3

Я новичок в jQuery, кто-нибудь может сказать, как это сделать?Создание элемента canvas с использованием jquery

Я делаю это между HTML код

<script> 
var Canvas_width=400; 
var Canvas_height=300; 
var CanvasElement =$("<canvas width='" + Canvas_width + "'height='" + Canvas_height + "'></canvas>"); 
var canvas=CanvasElement.get(0).getContext("2d"); 

CanvasElement.appendTo('body'); 
canvas.fillStyle = "#000000"; 
canvas.fill(); 
</script>

источник

2017-02-05 Manish Kumar

Пожалуйста, оставьте свои ** код как текст ** - вы ждете, чтобы люди повторно ввести код при ответе. – Filburt

В вопросе [этого] (http://stackoverflow.com/q/10433046/2401386) есть несколько ответов, которые могут вам помочь. – Blauharley

Возможный дубликат [Создание элемента холста и установка его атрибутов ширины и высоты с помощью jQuery] (http://stackoverflow.com/questions/10433046/creating-a-canvas-element-and-setting-its-width-and- height-attributes-using-jque) – Winter

Вам просто нужно, чтобы создать прямоугольник такого же размера, как холст перед заполнением его:

canvas.rect(0, 0, Canvas_width, Canvas_height);

Demo

var Canvas_width = 400; 
 
var Canvas_height = 300; 
 
var CanvasElement = $("<canvas width='" + Canvas_width + "' height='" + Canvas_height + "'></canvas>"); 
 
var canvas = CanvasElement.get(0).getContext("2d"); 
 

 
CanvasElement.appendTo('body'); 
 
canvas.rect(0, 0, Canvas_width, Canvas_height); // <======= HERE 
 
canvas.fillStyle = "#000000"; 
 
canvas.fill();

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

источник

2017-02-05 11:41:17 blex

Не могли бы вы рассказать мне, что эта строка делает :::: var CanvasElement = $ (" «); –

@ManishKumar Использование jQuery для создания '' HTML-элемент (элемент DOM) по ширине и высоте, определенным выше. – blex

@ blex.Sir.I хочу установить границу для моего холста, используя canvas.style.border = "red 1px solid"; , Он не работает здесь, в моем случае на консоли браузера, он печатает «Uncaught TypeError: Невозможно установить свойство« граница »неопределенного в некотором номере строки». –

Вот как вы должны это делать. Не добавляйте контекст холста, добавить сам элемент

var Canvas_width=400; 
 
var Canvas_height=300; 
 
var CanvasElement = $("<canvas width='" + Canvas_width + "'height='" + Canvas_height + "'></canvas>"); 
 
// Add the canvas element, not the context: CanvasElement[0].getContext('2d') 
 
document.body.appendChild(CanvasElement[0]); 
 

 
// Now create the canvas context, this is what you need to draw something 
 
var canvasContext=CanvasElement[0].getContext("2d"); 
 
// call beginPath() before drawing on the canvas 
 
canvasContext.beginPath(); 
 
// Select the rectangle inside your canvas in which you want to draw something 
 
canvasContext.rect(0, 0, Canvas_width, Canvas_height); 
 
canvasContext.fillStyle = "#000000"; 
 
canvasContext.fill();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

источник

2017-02-05 11:49:44 DerpyNerd

ответ

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