本文摘自PHP中文网,作者不言,侵删。
canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。所以,如何用canvas绘制一个矩形呢?接下来这篇文章将给大家来介绍关于canvas画一个矩形的实现方法的内容,若是有需要的话可以看看。我们需要知道的是在canvas中与矩形相关的方法是rect(),使用 stroke() 或 fill() 方法在画布上实际地绘制矩形。
rect()方法能接收 4 个参数:矩形的 x 坐标、矩形的 y 坐标、矩形宽度和矩形高度。这些参数的单位都是像素。
下面我们就来分别利用strokerect()和fillrect()方法来实现绘制矩形。
首先,我们来看看利用canvas中fillrect()方法绘制的有填充的矩形实例。
fillRect() 方法在画布上绘制的矩形会填充指定的颜色。填充的颜色通过fillStyle 属性指定。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" />
< title >用canvas画矩形</ title >
< style >
</ style >
</ head >
< body >
< canvas id = "canvas" width = "600" height = "400" ></ canvas >
< script type = "text/javascript" >
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d'); //getContext() 方法可返回一个对象
context.fillStyle = "green"; // 设置或返回用于填充绘画的颜色、渐变或模式
context.fillRect(50,50,400,300); // x轴 y轴 宽 和 高 ,绘制“被填充”的矩形
}
draw("canvas");
</ script >
</ body >
</ html >
|
canvas画有填充矩形的效果如下:
然后我们来看一看利用canvas中strokerect()方法绘制的无填充的矩形实例。
strokeRect() 方法在画布上绘制的矩形会使用指定的颜色描边。描边颜色通过strokeStyle 属性指定。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" />
< title >用canvas画矩形</ title >
< style >
</ style >
</ head >
< body >
< canvas id = "canvas" width = "600" height = "400" ></ canvas >
< script type = "text/javascript" >
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d'); //getContext() 方法可返回一个对象
context.strokeStyle = "pink"; //图形边框的填充颜色
context.lineWidth = 5; //用宽度为 5 像素的线条来绘制矩形:
context.strokeRect(50,50,180,120); //绘制矩形(无填充)
context.strokeRect(110,110,180,120);
}
draw("canvas");
</ script >
</ body >
</ html >
|
canvas画无填充矩形的效果如下:
最后本篇文章到这里就结束了,关于canvas更多的相关知识可以参考HTML5开发手册。
以上就是如何用canvas绘制矩形?canvas画矩形的两种方法介绍的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
如何利用html5 canvas旋转图片?(实例演示)
html5 canvas基本绘图之绘制线条
关于html5 canvas的事件处理
用javascript将canvas内容转化成图片的方法详解
canvas中使用clip()函数裁剪方法
html5中canvas与svg有什么区别
html5 canvas粒子形成下雪背景的效果
canvas怎么使用
用canvas实现简单的下雪效果(附代码)
如何用html5中的canvas实现渐变文字的效果
更多相关阅读请进入《canvas》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 如何用canvas绘制矩形?canvas画矩形的两种方法介绍