初探HTML5——canvas元素（二）
2017-10-22 本文已影响0人
Sugar_Ye
本节主要涉及绘制矩形的操作，内容比较简单。
一、绘制实心矩形
调用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了新技能！
