使用canvas绘制图形需要三个步骤：
1.获取canvas对象
2.获取上下文环境对象（2D）context
3.开始绘制图形
注意事项
- canvas是一个行内块级元素，我们需要指定ID，width，height
- 默认情况下canvas的高度为300px宽度为150px
- 我们有两种方法来定义：在HTML属性中定义；在CSS样式中定义
- 在实际开发中我们一定不要在css中定义样式，而是应该在HTML属性中定义
- 因为在开发中经常要获取对象正确的宽高，用width和height获取的宽高往往是默认宽高150和300
- 当然我们可以用getComputedStyle(canv,null).width获取计算属性的宽高不过也不准确，画出的的东西是失真的
- 以后学习的所有图形的绘制都是使用的context的对象的属性和方法
- 我们使用的所有坐标系都是使用的W3C坐标系
- moveTo的含义是“将画笔移动到某一点作为开始的点”
- lineTo的含义是“定义画笔的终点”
- stroke的含义是“开始划线”
- lineTo是可以连续调用的
矩形
- cxt.strokeStyle属性设置划线的颜色
- strokeRect(x,y,width,height)方法是用于划矩形的
- fillStyle设置填充的颜色
- fillRect(x,y,width,height)是用来填充矩形的
- rect(x,y,width,height)是用来定位矩形的位置和大小的，填充需要再使用fill()方法，划线需要再使用stroke()的方法
- 清空矩形可以使用clearRect(x,y,width,height)方法清空指定区域
举个栗子，一个简单的柱状图就可以画出来了
<script type="text/javascript">
window.onload=function(){
//获取canvas对象
var canv=document.getElementById("demo01");
//获取上2d下文对象 context
var cxt=canv.getContext("2d");
//开始绘制图表
cxt.fillStyle="red";
cxt.fillRect(20,200,20,300)
cxt.fillStyle="yellow";
cxt.fillRect(60,300,20,200)
cxt.fillStyle="green";
cxt.fillRect(100,400,20,100)
cxt.fillStyle="yellow";
cxt.fillRect(140,300,20,200)
cxt.strokeStyle="blue";
cxt.moveTo(10,200)
cxt.lineTo(10,500)
cxt.lineTo(500,500);
cxt.stroke();
}
</script>
图一.png
多边形
- 通过之前的学习我们可以利用moveTo()和lineTo()来画一些多边形和矩形，对于箭头也是事先定义好七个顶点坐标来绘制出的；
canvas绘制箭头
<script type="text/javascript">
window.onload=function(){
//获取canvas对象
var canv=document.getElementById("demo01");
//获取上2d下文对象 context
var cxt=canv.getContext("2d");
//开始绘制箭头
cxt.moveTo(40,60)
cxt.lineTo(100,60)
cxt.lineTo(100,30)
cxt.lineTo(150,75)
cxt.lineTo(100,120)
cxt.lineTo(100,90)
cxt.lineTo(40,90)
cxt.lineTo(40,60)
cxt.strokeStyle="red";
cxt.stroke();
}
</script>
箭头.png
canvas绘制正多边形
-绘制多边形我们可以以圆为基础，利用sin和cos来确定多边形的顶点，将2π根据边的多少分割圆心的角度；利用cos确定y轴坐标，利用sin确定x轴坐标；
举个栗子
我们可以先封装一个函数，然后绘制坐标轴和辅助圆
<script type="text/javascript">
window.onload = function() {
//获取canvas对象
var canv = document.getElementById("demo01");
//获取上2d下文对象 context
var cxt = canv.getContext("2d");
//开始绘制坐标轴
cxt.moveTo(200,0)
cxt.lineTo(200,600)
cxt.moveTo(0,200)
cxt.lineTo(600,200)
cxt.stroke()
//绘制辅助圆
cxt.beginPath()
cxt.arc(200,200,51,0,2*Math.PI)
cxt.closePath();
cxt.strokeStyle="#0076D1"
cxt.stroke()
//封装一个绘制多边形的函数
function createPolygon(context, n, ox, oy, d) {
// context为上下文对象
// n为几边形
// x,y为圆心坐标
// d为圆的半径
context.beginPath();
var deg = 2 * Math.PI / n;//计算出每个顶点的邻角
for(var i = 0; i < n; i++) {
var y = Math.cos(i*deg-Math.PI/n),//计算出每个顶点的y轴坐标
x=Math.sin(i*deg-Math.PI/n);//计算出每个顶点的X轴坐标
context.lineTo(x*d+ox,y*d+oy);//将每个顶点链接起来
}
context.closePath();
}
// 调用函数
createPolygon(cxt,3,200,200,50)
cxt.strokeStyle="red";
cxt.stroke();
}
</script>
多边形绘制结果.png
<script type="text/javascript">
window.onload = function() {
//获取canvas对象
var canv = document.getElementById("demo01");
//获取上2d下文对象 context
var cxt = canv.getContext("2d");
//开始绘制坐标轴
cxt.moveTo(200,0)
cxt.lineTo(200,600)
cxt.moveTo(0,200)
cxt.lineTo(600,200)
cxt.stroke()
//绘制辅助圆
cxt.beginPath()
cxt.arc(200,200,51,0,2*Math.PI)
cxt.closePath();
cxt.strokeStyle="#0076D1"
cxt.stroke()
//封装一个绘制多边形的函数
function createPolygon(context, n, ox, oy, d) {
// context为上下文对象
// n为几边形
// x,y为圆心坐标
// d为圆的半径
context.beginPath();
var deg = 2 * Math.PI / n;
for(var i = 0; i < n; i++) {
var y = Math.cos(i*deg-Math.PI/n),
x=Math.sin(i*deg-Math.PI/n);
context.lineTo(x*d+ox,y*d+oy);
}
context.closePath();
}
// 调用函数
createPolygon(cxt,3,200,200,50)
cxt.fillStyle="rgba(255,0,0,0.5)";
cxt.fill();
createPolygon(cxt,4,200,200,50)
cxt.fillStyle="rgba(0,255,0,0.5)";
cxt.fill();
createPolygon(cxt,5,200,200,50)
cxt.fillStyle="rgba(0,0,255,0.5)";
cxt.fill();
}
</script>
结果.png
网友评论