js怎么输入四个坐标在html里生成一个矩形，并点击旋转按钮将矩形旋转45度？

JavaScript025

js怎么输入四个坐标在html里生成一个矩形，并点击旋转按钮将矩形旋转45度？,第1张

用canvas，画矩形的方法是rect，四个参数就是输入的四个坐标，当然也可以用画线段的方式画出来。旋转的话canvas也支持rotate方法，参数是45deg就可以了，跟CSS3差不多的使用方法。

本文实例讲述了js+canvas绘制矩形的方法。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>canvas绘制矩形</title>

<script type="text/javascript" >

function draw(id) {

var canvas = document.getElementById("canvas")

if (canvas) {

var context = canvas.getContext("2d")

context.fillStyle = "#DDDDDD"

context.fillRect(0, 0, 400, 400)

context.strokeStyle = "black"

context.fillStyle = "gray"

context.lineWidth = 5

context.fillRect(0,0,200,300)

context.strokeRect(0,0,200,200)

} else {

return

}

}

function drawBorder(id) {

var canvas = document.getElementById("canvas2")

if (canvas) {

var context = canvas.getContext("2d")

context.fillStyle = "red"

context.strokeStyle = "black"

context.lineWidth = 5

context.fillRect(0,0, 300, 200)

context.strokeRect(0,0,300,200)

} else {

return

}

}

window.onload = function () {

draw("canvas")

drawBorder("canvas2")

}

</script>

</head>

<body>

<canvas id="canvas" width="400" style="background:red" height="400"></canvas>

<hr />

<canvas id="canvas2" width="400" height="400"></canvas>

</body>

</html>