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

『壹』 js 怎么给canvas里画多个矩形并分别给它们加层级

本文实例讲述了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>

『贰』 canvas属性方法整理

整理了一些有关canvas的属性（ ’ - ’ * )

canvas画布

用于绘制图像，本身不具备绘制能力，需要通过脚本来完成绘画，通常这个脚本就是javascript

canvas的默认宽高为300*150，不能通过css或行内样式修改它的宽高，它有自己的宽高属性

canvas是一个html元素，通过js来执行绘制

getContext()是用来获取canvas上下文渲染环境和绘画功能的方法,目前只有一个参数：'2d'，代表返回一个2d的绘制环境，将来有可能3d，但是目前不支持

它可以做什么？

html5小游戏

绘制图片，图标，图表，曲线图等等，例如地图上的热力图等等

以及各种酷炫的动画效果都可以通过canvas来完成(可以了解一下WEBGL<http://www.hewebgl.com/>)

画布栅格

![img](https://mdn.mozillademos.org/files/224/Canvas_default_grid.png)

通常画布的一个格子就代表canvas中元素的一像素，栅格的左上角为起点，坐标0, 0，所有位置都相对于原点定位，

使用：

var canvas = document.gteElementById('canvas');

var context = canvas.getContext('2d'); // 环境准备历兄好，调用context的方法属性绘制即可

属性及方法

beginPath()

新开始一条路径，绘制方法被指向新路径

closePath()

闭合当前路径，让绘制命令重迅尺新指向上下文

stroke()

通过线条来绘制图像轮廓

fill()

通过填充路径的内容区域生成实心图形

moveTo(x, y)

描述起点坐标

lineTo(x, y)

描述终点坐标

rect(x, y, width, height)

绘制矩形x,y为绘制的起点坐标，width和height为要绘制矩形的宽高，无需加px

需要配和stroke绘制带边框的矩形，或者fill绘制实心矩形

strokeRect(x, y. width, height)

参数同上，绘制边框矩形

fillRect(x,y,width,height)

参数同上，绘制填充矩形

clearRect(x,y,width,height)

清除指定区域矩形,会留下一块白色矩形区域

arc(x,y,r,sangle,eangle,counterclockwise)

圆弧

x,y为绘制圆的圆心坐标

r为圆的半径

sangle,eangle为圆的起始角度和结束角度

counterclockwise，可选参数，表示绘制圆是顺时针还是逆时针，true为逆时针

strokeStyle

描边的颜色

fillStyle

填充的颜色

shadowColor

阴影颜色

shadowBlur

亩烂高阴影模糊级别

shadowOffsetX

阴影水平偏移量

shadowOffsetY

阴影垂直偏移量

lineCap

设置线条两端结束位置的形状

butt默认

round圆形帽

square正方形

lineJoin

设置线条与线条接合处的样式

miter (默认)，通过延伸相连部分的外边缘，使其相交于一点，形成一个额外的菱形区域。

round 通过填充一个额外的，圆心在相连部分末端的扇形，绘制拐角的形状。圆角的半径是线段的宽度。

bevel 在相连部分的末端填充一个额外的以三角形为底的区域，每个部分都有各自独立的矩形拐角。

lineWidth

线条宽度，以像素计算，没有px

rotate(angle)

旋转

角度转弧度公式

deg乘以Math.PI/180

deg为要绘制的角度

Math.PI为圆周率，也就是180度，但是它为一个浮点数，即使除以180也不能忽略它的小数

translate(x, y)

移动原点

将一个坐标原点向x,y正方向移动，如果坐标原点不在原来的位置，则以新的位置加上要移动的位置

scale(x, y)

缩放x轴和y轴分别设置缩放

rotate(x, y)

旋转

凡是牵扯到度数，都用公式deg乘以Math.PI/180来计算

arcTo(x1,y1,x2,y2,r)

画圆角，一般两个直线相交的地方，用此方法绘制成圆弧，x1,y1指圆弧开始的x坐标和y坐标，x2,y2指圆弧结束的x和y坐标，r指半径

setLineDash/lineDashOffset/getLineDash

绘制虚线

setLineDash([实线长度, 间隙长度])方法接受一个数组，来指定线段与间隙的交替

lineDashOffset设置起始偏移量

getLineDash()返回当前虚线的样式，为一个数组

fillText(text, x, y [, maxWidth])

绘制填充文本

text文本

x,y指定的坐标

maxWidth最大宽度，可选

strokeText(text, x, y [, maxWidth])

绘制文本边框

text文本

x,y指定坐标

maxWidth最大宽度，可选

font

文本样式

和css设置字体相似，复合设置

例如：context.font='100px sans-serif';

textAlign/textBaseline/direction

textAlign(文本对齐选项): start|end|left|right|center

textBaseline(基线对齐选项)：top|hanging|middle|alphabetic|ideographic|bottom

direction(文本方向)：ltr|rtl|inherit

绘制图片

drawImage(imgElement,x,y,width,height)

x,y绘制图片的起始坐标

imgElement 要绘制的图片元素,或者为一个canvas的引用

width,height,设置图片的宽高

裁剪图片

drawImage(imgElement,sx, sy, swidth, sheight, x,y,width,height)

imgElement 要绘制的图片元素,或者为一个canvas的引用

sx, sy (可选)要裁剪的起始位置

swidth, sheight (可选)要裁剪区域的宽高

x,y放置原始图片的位置

width,height (可选)原始图片的宽高

为了不失真，一般尝试让swidth, sheight和width、height相等，x,y原点，去改变sx,sy(裁剪的起始位置)即可，实际根据需求来定

save()/restore()

save() 保存状态，保存在栈中，类似于数组的push

restore() 恢复状态，类似于数组的pop

clip()

裁剪路径

把一个路径之外的内容进行裁剪，只保留路径本身内部的内容

用于控制动画的常用方法

setInterval()

setTimeout()

requestAnimationFrame()

只执行一次，一般通过递归调用来完成动画制作

接受一个回调函数，专门提供给动画的api，默认刷新帧率为一秒60次，优于以上两个方法，比如页面未激活状态下回自动暂停，节省cpu的开销

cancelAnimationFrame() 用来停止此方法的执行

可能有不足的地方欢迎大家补充(•̀⌄•́)

『叁』 js画矩形

用一个div代替，因为你是矩形，div正好合适，设置下border backgroundcolor等等
用canvas来画出矩形，html5的新元素，自己去搜索api

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

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

『伍』使用canvas绘制“实心”矩形时,使用什么方法,该方法的参数分别代表什么意思

使用canvas绘制“实心”矩形时,使用什么方法,该方法的参数分别代表：摘大多数 Canvas 绘图 API都没有定义在元素本身上，而是定义在通过画布的 getContext()方法获得的一个“绘图环境”对象上。

1、fillRect(x,y,width,height)。绘制一个从(x,y)开始，宽度为width，高度为height的实心矩形。

2、strokeRect(x,y,width,height)。绘制一个从(x,y)开始，宽度为width，高度羡族为height的矩形框。该矩形框会根据当前设置的strokeStyle、lineWidth、lineJoin和miterLimit属性的不同而渲染成不同的样式。

差异：

<canvas> 标记和SVG以及 VML 之间的一个重要的不同是，<canvas> 有一个基于JavaScript的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。

这两种方式在功能上是等同的，任何一种都可以用另一种来模拟。从表面上看陪段，它们很不相同，可是，每一种都有强项和弱点。例如，SVG 绘图很容易编辑，只要从其描述中移除元素就行。

要芦派誉从同一图形的一个 <canvas> 标记中移除元素，往往需要擦掉绘图重新绘制它。

『陆』 Javascript如何在网页上实现画图功能

那是不可能完成的任务，只能用FLASH来实现，当然在HTML5的标准下，这个可以实现，但是HTML5还没普及。

『柒』怎样使用canvas绘制一个矩形

1、首先需要新建文件并创建画布。

导航:首页 > 编程语言 > javascriptcanvas矩形

javascriptcanvas矩形

与javascriptcanvas矩形相关的资料

友情链接