在JQuery中繪製圖形

-2

我正在Jquery工作。我有4個座標，寬度，高度，x位置和Y位置。如何創建一個方形使用本在JQuery中繪製圖形

$('#box').drawRect(20,20,2,30,{color:'red'})

我嘗試這樣做，不工作。尋找一個好手

這是我的演示。 http://fiddle.jshell.net/vbm2vhu4/

來源

2015-01-14 Dinesh Kanivu

沒有'drawRect'方法jQuery的，試圖用帆布？ – giannisf

@Giannis Canvas或div，但我如何繪製這些在Jquery中的座標的形狀 –

使用jQuery：'$（'＃box'）.css（{position：「absolute」，width：20，height：20，left： 2，top：3，backgroundColor：'red'}）;'（http://fiddle.jshell.net/vbm2vhu4/3/） - 我的觀點是** jQuery沒有繪製/形狀功能。**您是否正在嘗試使用[jCanvas插件]（http://calebevans.me/projects/jcanvas/docs/methods/），它有* .drawRect（）方法？ – nnnnnn

嘗試使用JavaScript中的canvas標籤..

var c = document.getElementById("myCanvas"); 
 
var ctx = c.getContext("2d"); 
 
ctx.rect(20, 20, 150, 100); 
 
ctx.stroke();

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

來源

2015-01-14 10:02:43 Sarath

JSFIDDLE

JAVASCRIPT

畫圓

$(document).ready(function(){ 
    var canvas = document.getElementById('myCanvas'); 
     var context = canvas.getContext('2d'); 
     var centerX = canvas.width/2; 
     var centerY = canvas.height/2; 
     var radius = 70; 

     context.beginPath(); 
     context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
     context.fillStyle = 'green'; 
     context.fill(); 
     context.lineWidth = 5; 
     context.strokeStyle = '#003300'; 
     context.stroke(); 
});

來源

2015-01-14 10:03:21

謝謝，兄弟我怎麼可以給鼠標在該廣場 –

@Deekey看看這個問題的那個http://stackoverflow.com/questions/6505765/mouseover-circle-html5-canvas –

繪製矩形需要畫布。你真的不需要爲它使用jquery。它可以用Javascript完成。我在這裏附上我的例子。

<!DOCTYPE html> 
<html> 
<body> 

<canvas id="myCanvas" width="300" height="150"> 
Browser does not support the HTML5 canvas tag.</canvas> 

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


// Blue rectangle 
ctx.beginPath(); 
ctx.lineWidth = "10"; 
ctx.strokeStyle = "blue"; 
ctx.rect(50, 50, 50, 50); 
ctx.stroke(); 
</script> 

</body> 
</html>

粘貼到這個記事本並保存爲.html和在瀏覽器中加載它

或的jsfiddle http://jsfiddle.net/ssbiswal1987/vsbak0mq/

來源

2015-01-14 10:12:03 ssbiswal1987

謝謝，兄弟我怎麼能給鼠標懸停效果到該廣場 –

我已更新代碼http://jsfiddle.net/ssbiswal1987/vsbak0mq/4/ – ssbiswal1987

在JQuery中繪製圖形

回答

相關問題