怎样使用canvas绘制一个矩形
发布网友
发布时间：2022-04-22 14:39
共5个回答
懂视网
时间：2022-05-12 03:56
下面我们就来具体看一下canvas元素怎么使用。
canvas元素只能作为图形的容器; 因此，我们应该使用JavaScript来渲染图形
我们在Canvas上绘制图形，需要首先使用文档对象模型（DOM）进行目标定位。并且，使用id属性将帮助你识别匹配的目标位置。
我们来看一个canvas元素的代码
<canvas width="320" height="160" id="canvasExample"></canvas>
Canvas元素允许两个特定属性：width和height。
如果不为这两个属性提供值，则Canvas将使用宽度为300像素，高度为150像素的默认值。
该ID属性被用于识别在JavaScript代码Canvas元素。
最初，<canvas>元素为空。因此，为了展示某些内容，JavaScript脚本应该在绘制之前获取渲染上下文。
Canvas元素有一个内置的DOM方法，称为getContext。它是一个JavaScript函数，用于访问渲染上下文及其绘图方法。
此函数接受单个参数，通常是2D图形上下文（定义为“2d”）
例如，要在Canvas上创建矩形形状，需要以下属性和函数：
fillStyle =“color ” -为矩形添加颜色。
fillRect（x，y，width，height） -绘制一个填充的矩形
strokeRect（x，y，width，height） -给矩形提供了轮廓
clearRect（x，y，width，height） -它清除指定的矩形截面并使其完全透明
为了定义坐标，使用Canvas网格或坐标系。原始尺寸位于Canvas区域的左上角，坐标为（0,0）。
因此，X坐标将向右移动，而Y坐标将向下移动。距离以像素为单位
x给出从左上角到右上角的水平位置
y给出从左上角到下边的垂直位置
width给出矩形的宽度
height给出矩形的高度
具体的代码如下
<!DOCTYPE html>
<html>
<head>
<title>JavaScript HTML5 Canvas Example</title>
</head>
<body onload="canvasExample()">
<canvas width="320" height="160" id="canvasExample"></canvas>
<script>
function canvasExample(){
var canvas = document.getElementById("canvasExample");
if(canvas.getContext){
var context = canvas.getContext('2d');
context.fillStyle = "blue";
context.fillRect(50,50,150,250);
context.clearRect(75,75,100,50);
context.strokeRect(90,90,75,20);
}else{
alert("Please a Canvas-Supporting Web Browser");
}
}
</script>
</body>
</html>浏览器上显示效果如下
以上代码中JavaScript中所实现的是：
首先通过DOM识别Canvas元素
上下文已定义
fillRect（）函数生成一个150 x 250像素的矩形
然后clearRect（）函数从中心删除一个100 x 50像素的矩形
最后，strokeRect（）函数在清除区域内构造一个75 x 20像素的矩形
热心网友
时间：2022-05-12 01:04
1、首先需要新建文件并创建画布。
2、接下来开始定义函数获取画布。
3、然后可以获取上下文。、
4、接着需要设置填充矩形的颜色。
5、接下来开始设置边框颜色和边框宽度。
6、最后开始绘制填充矩形和边框矩形。
7、最后输出完成图，可以看到绘制一个矩形。
热心网友
时间：2022-05-12 02:22
1、首先需要建立一个HTML5的网页：进入DW后，选择：文件-->新建，在弹出的对话框中选择文件类型为Html5
2、选择“创建”后，即会形成一个空白网页，选择“文件”--"保存",起名为：juxing
3、将视图切换为”代码“视图，并将标题改为“画出矩形”，标题也可以依据自己的喜好进行设定，并不影响网页的运行。
4、Html是标记型语言，各种功能都需要在对应的标签里面才可以，故先需要添加标签。输入<c，就会看到提示列表里出现所需要的标签canvas，按下回车键，即可完成输入。
5、每次操作都会有提示列表，只需选择所需的项目，按下回车即可，只有引号内的”mycanvas“是需要完整输入的，命令为：<canvas id="mycanvas" width="600" height="400"></canvas>
6、Canvas标记不能直接画图，需配合JavaScript语言，先写出对应的程序标记。Html语言中的标记都是成对出现的，为了避免错误，先将标记的起始、标记的结束写好
7、写好前后标记后，即可在标记中使用JavaScript语言，调用Canvas标记，画出所需矩形
8、将变量 ctxt赋值为利用刚定义的“canvas”返回的二维绘图环境对象，使用这个对象就可以绘图了，使用fillStyle方法设置颜色。
ctx.fillRect(50,50,400,200)指填充的起始位置设置为（50，50），矩形宽度为400，高度为200
9、选择在浏览器中浏览后，即可看到所需矩形。
热心网友
时间：2022-05-12 03:56
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="demoCanvas" width="500" height="500">
<p>请使用支持HTML5的浏览器查看本实例</p>
</canvas>
<!---下面将演示一种绘制矩形的demo--->
<script type="text/javascript">
//第一步：获取canvas元素
var canvasDom = document.getElementById("demoCanvas");
//第二步：获取上下文
var context = canvasDom.getContext('2d');
//第三步：指定绘制线样式、颜色
context.strokeStyle = "red";
//第四步：绘制矩形，只有线。内容是空的
context.strokeRect(10, 10, 190, 100);
//以下演示填充矩形。
context.fillStyle = "blue";
context.fillRect(110,110,100,100);
</script>
</body>
</html>
热心网友
时间：2022-05-12 05:48
var ctx =getContext('2d');
ctx.beginPath();
ctx.lineWidth=1;
ctx.strokeStyle="#000";
ctx.rect(0,0,10,20);
ctx.stroke();
ctx.closePath();
//用closepath结束绘画，否则可能出现黏连；
ctx.beginPath();
ctx.lineWidth=1;
ctx.strokeStyle="#f00";
ctx.rect(50,0,10,20);
ctx.stroke();
ctx.closePath();
