1.Canvas绘制步骤
- 在html5页面中添加canvas元素,定义id属性值以便后面调用
<canvas id="myCanvas" width="500" height="200"></canvas>
- 使用id寻找页面中的canvas元素
var c=document.getElementById("myCanvas");
- 通过canvas元素的getContext方法来获取其上下文(Context),即创建context对象,以获取允许绘制的2D环境
var context=c.getContext("2d");
- 使用javascript脚本来进行绘制
context.fillStyle="#ff0000";
context.fillRect(50,25,100,50);
<head>
<title></title>
<!--给画布设置一个样式-->
<style type="text/css">
#myCanvas{
border: 1px solid blue;
}
</style>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.fillStyle="#ff0000";
context.fillRect(50,25,100,50);
//距离画布左边50,上边25,绘制的图形宽100,高50
}
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
</body>
运行结果:
2.绘制直线相关方法及属性
方法:
- beginPath():定义绘制动作的开始
- moveTo():绘制图形的起点位置
- lineTo():绘制图形的重点位置
- stroke():为所画的线赋予颜色,如没有指定,默认为黑色
属性:
- lineWidth:直线的宽度
- strokeStvle:直线的颜色
- 直线端点样式:用lineCap属性设定,包括三种样式,分别为butt,round,square
<html>
<title></title>
<style type="text/css">
#myCanvas{
border: 1px solid blue;
background-color: #77ffcc;
}
</style>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
//绘制直线
context.beginPath();
context.moveTo(50,100);
context.lineTo(200,100);
context.lineWidth=10;
context.strokeStyle="#ff0000";
context.lineCap="round";
context.stroke();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
</body>
</html>
3.绘制弧线和曲线
arcTo(x1,y1,x2,y2,radius) ;包含五个参数,(x1,y1)是端点1,(x2,y2)是端点2,radius是绘制的弧线的半径,此方法就是利用第一条线的终点、端点1、端点2组成的夹角,与夹角两边相切并以radius为半径画弧线,详情实例见下面代码。
<html>
<title></title>
<style type="text/css">
#myCanvas{
border: 1px solid blue;
background-color: #77ffcc;
}
</style>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
//绘制弧线
context.beginPath();
context.moveTo(20,20);//第一条直线的起点
context.lineTo(100,20);//第一条直线的终点
//端点1:(150,20)端点2:(150,70)b半径:50;
context.arcTo(150,20,150,70,50);
context.lineTo(150,120);//第二条线的终点
context.stroke();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
</body>
- arcTo():创建介于两个切线之间的弧/曲线
- quadraticCurveTo():绘制二次曲线,每条二次曲线由上下文点、一个控制点和一个终止点来定义
<html>
<style type="text/css">
#myCanvas{
border: 1px solid blue;
background-color: #77ffcc;
}
</style>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
//绘制二次贝塞尔曲线
context.beginPath();
context.moveTo(200,100);//起始点
context.quadraticCurveTo(288,0,388,150);
context.lineWidth=5;
context.strokeStyle="pink";
context.stroke();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
</body>
</html>
- bezierCurveTo():绘制贝塞尔曲线,每条贝塞尔曲线由上下文点、两个控制点和一个终止点来确定