canvas基本矩形
程序员文章站
2022-04-03 16:57:30
...
绘制矩形有3种不同的方式：填充，搭边或清除。当然，创建矩形还可以使用路径。
实现这3种 操作的API函数如下：
fillRect(x,y,width,height)在位置(x,y)处以宽为width,高为height绘制一个填充的矩形
strokeRect(x,y,width,height)在位置(x,y)处以宽为width,高为height绘制一个矩形边框。它需要使用当前的strokeStyle,lineWidth,lineJoin以及miterLimit设置
clearRect(x,y,width,height)在位置(x,y)处以宽width,高height，清除指定区域并使其完全透明
以下完整案例代码：
<!DOCTYPE HTML>
<html lang="cn">
<head>
<meta charset="utf-8">
<title>canvans</title>
<script src="modernizr-custom.js"></script>
<script type="text/javascript">
//检测window是否加载完毕最终的代码
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
canvasApp();
}
//检测是否支持canvas
//使用modernizr.js
function canvasSupport() {
return Modernizr.canvas;
}
//绘图
function canvasApp() {
if (!canvasSupport()) {
return;
} else {
var theCanvas = document.getElementById("canvas"); //创建画布实例
var context = theCanvas.getContext("2d"); //获得2D上下文
}
drawScreen();
function drawScreen() {
context.fillStyle = '#000'; //设置或返回用于填充绘画的颜色、渐变或模式
context.strokeStyle = '#ff00ff'; //设置或返回用于笔触的颜色、渐变或模式
context.lineWidth = 2; //设置或返回当前的线条宽度
context.fillRect(10, 10, 40, 40); //绘制“被填充”的矩形
context.strokeRect(0, 0, 60, 60); //绘制矩形（无填充）
context.clearRect(20, 20, 20, 20); //在给定的矩形内清除指定的像素
}
}
</script>
</head>
<body>
<div style="position: absolute;top:50px;left: 50px; z-index: 10;">
<canvas id="canvas" width="500" height="400">
Your browser does not support the canvas element.
</canvas>
</div>
</body>
</html>
上一篇： 云计算中MySQL的存储引擎解析
下一篇： Linux iotop工具简介