本节主要涉及绘制矩形的操作,内容比较简单。
一、绘制实心矩形
调用fillRect(x,y,w,h) 方法可以绘制一个实心矩形,参数分别表示x,y轴坐标和矩形的宽、高。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas演示绘制矩形</title>
<script type="text/javascript">
window.onload=function(){
//获取canvas对象的context(绘图上下文)
var context=document.getElementById('canvas').getContext("2d");
//绘制实心矩形
context.fillRect(50,50,200,100);
}
</script>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
在浏览器中查看效果:
实心矩形效果二、美化矩形
如图黑乎乎的实心矩形真是不怎么美观,接下来我们尝试美化一下。先让矩形换个颜色,然后添加一个外边框。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas演示绘制矩形</title>
<script type="text/javascript">
window.onload=function(){
//获取canvas对象的context(绘图上下文)
var context=document.getElementById('canvas').getContext("2d");
//设置填充色
context.fillStyle="bisque";
//设置边框宽度
context.lineWidth=2;
//设置边框颜色
context.strokeStyle="red";
//绘制实心矩形
context.fillRect(100,100,300,100);
//绘制矩形边框(空心矩形)
context.strokeRect(100,100,300,100);
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
</body>
</html>
浏览效果:
美化之后的效果PS:恭喜你,又Get了新技能!
网友评论