一、<canvas>是H5新增的元素,可以把它当做是inline-block元素。
<canvas id="canvas1" width="300px" height="300px"></canvas>
可以指定宽高,也可以使用默认值:width="300px",height="150px"。canvas没有其他的可选属性,不考虑CSS会引起的差异,尽量在标签中指定宽高,不使用CSS。
二、<canvas>只支持一种原生图形绘制:矩形
绘制矩形相关的方法(属性):
fillRect(); //绘制一个填充的矩形
fillStyle; //给填充的矩形添加颜色 这个是属性
strokeRect(); //绘制一个矩形边框
clearRect(); //清除一部分区域,使之透明
function drawRect() {
var canvas1=document.getElementById("canvas1");
if(!canvas1.getContext) return;
var ctx1=canvas1.getContext("2d");
ctx1.fillRect(50,10,50,50);//先填充颜色,默认为黑色
ctx1.fillStyle="rgb(200,0,0)";
ctx1.fillRect(200,100,30,30);
//ctx1.fillStyle="rgb(200,0,0)";
ctx1.strokeRect(50,70,50,50);//绘制矩形边框
ctx1.clearRect(60,20,20,20);//清除一部分,使之透明
}
fillStyle要在fillRect()之前,否则就默认填充黑色,如上代码的第一个fillRcet();
strokeRect()绘制矩形边框(边框颜色的改变问题先保留)
clearRect()效果就是第一个矩形中的透明区域。
三、要绘制其他图形,需要绘制路径
路径简单的说就是不同的线段和曲线相连
绘制路径的步骤:
- biginPath();//路径开始
- moveTo();//指定路径的起点
- 下一个点;//不同的图形,确定的方法不同
- closePath();//关闭路径
- stroke();//绘制轮廓
- fill();//填充颜色
1.绘制三角形
function drawTri() {
var canvas2=document.getElementById("canvas2");
if(!canvas2.getContext) return;
var ctx2=canvas2.getContext("2d");
ctx2.beginPath();
ctx2.moveTo(50,50);
ctx2.lineTo(100,50);
ctx2.lineTo(100,100);
ctx2.closePath();//只是关闭这个路径,但是不会把图形绘制出来
ctx2.stroke();//绘制图形轮廓。如果没有closePath的话,三角形不会封闭
ctx2.fill();//填充颜色。默认黑色
}
左图,即时代码对应的图形;中图,没有填充fill();右图,没有closePath(),路径没有关闭,所以三角形不封闭。
至于填充色,保留。
2.绘制圆弧
绘制圆弧的两个方法:
- arc(x,y,radius,startangle,endangle,bool);//x,y起始点坐标,起止角度都用弧度表示,bool为true表示逆时针,fasle顺时针
- arcTo(x1,y1,x2,y2,radius);//这个有点深
function drawCircle() {
var canvas3=document.getElementById("canvas3");
if(!canvas3.getContext) return;
var ctx3=canvas3.getContext("2d");
ctx3.beginPath();
ctx3.arc(50,10,40,0,Math.PI/2,false);
ctx3.stroke();
ctx3.beginPath();
ctx3.arc(150,50,40,0,-Math.PI/2,true);
ctx3.closePath();
ctx3.stroke();
ctx3.beginPath();
ctx3.arc(50,100,40,-Math.PI/2,Math.PI/2,false);
ctx3.fill();
ctx3.beginPath();
ctx3.moveTo(200,60);
ctx3.arcTo(250,60,250,110,50);
ctx3.lineTo(250,110);
ctx3.stroke();
}
第一种方法:首先要注意,角度要用弧度来表示,配合bool值,来绘制对应的弧。
第二种方法:确定起始点,再确定两个控制点,起始点与控制点1决定一条直线1,控制点1与控制点2决定一条直线2,最终绘制出的弧线与这两条直线相切。(更深入:绘制贝塞尔曲线)。
学习过程的笔记,如有错误,请指正。
下一篇:canvas(二)
参考:https://blog.csdn.net/u012468376/article/details/73350998