在 JQuery 中绘制形状答案

【问题标题】：Draw Shape in JQuery在 JQuery 中绘制形状
【发布时间】：2015-01-14 18:12:03
【问题描述】：

我在 Jquery 工作。我有 4 个坐标，宽度，高度，x 位置和 Y 位置。我怎样才能使用这个创建一个方形

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

我试过了，但不工作。寻找一手好牌

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

【问题讨论】：

jQuery 上没有drawRect 方法，正在尝试使用画布吗？
@Giannis Canvas 或 div，但我如何在 Jquery 中使用这些坐标绘制形状
使用 jQuery：$('#box').css({position:"absolute",width:20,height:20,left:2,top:3, backgroundColor:'red'}); (fiddle.jshell.net/vbm2vhu4/3) - 我的意思是 jQuery 没有绘图/形状功能。 您是否尝试使用 jCanvas plugin ，哪个有有.drawRect()方法？

标签： javascript jquery

【解决方案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>

【讨论】：

【解决方案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();
});

【讨论】：

谢谢，兄弟，我怎样才能给那个方块添加鼠标悬停效果
@Deekey 看看这个问题stackoverflow.com/questions/6505765/…

【解决方案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/

【讨论】：

谢谢，兄弟，我怎样才能给那个方块添加鼠标悬停效果