Question

我在Jquery工作。我有4个Cordinates，Width，Height，x Position和Y position。如何使用此

创建方形

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

我试过这个并且没有工作。寻找好手

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

Answer 1

尝试在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>

Answer 2

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();
});

Answer 3

绘制矩形需要画布。你真的不需要使用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/

在JQuery中绘制形状

3 个答案: