canvas简介
<canvas> 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画,甚至可以进行实时视频处理和渲染。
创建画布
<canvas id="myCanvas" width="500" height="500">您的浏览器不支持canvas</canvas>
var myCanvas = document.getElementById('myCanvas');
画布本身是不具有绘制效果的,所以需要使用脚本语言操作绘制图形的api进行绘制操作,可以用getElementById()方式获取对象。
准备画笔
var ctx = canvas.getContext('2d');
坐标和起点
context.moveTo(x,y);
绘制线条的方法
绘制一条从x,y的位置绘制一条直线到起点或上一个线头点
context.lineTo(x,y);
绘制路径
context.beginPath();/*开始路径*/ context.closePath();/*闭回路径*/
描边和填充
在canvas图形绘制中 ,路径只是草稿,真正绘制线必须执行stroke0方法根据路
径进行描边,还可以使用fill0方法进行图形的填充。
context.stroke();//描边 context.fill;//填充
canva绘制矩形和清除矩形
canvas中分别使用strokeRect0和fillRect0方法来绘制矩形边框和填充矩形。
context,strokeRect(x,y.width,height);
contet.illRect(x,y,width,height);
在canvas中还有一个相当于橡皮擦的方法,使用它可以清除矩形内绘制的内容。
context.clearRect(x,y,width,height);
绘制圆形
context.arc(x,y,radius,startAngle,endAngle,bAntiClockwise);
绘制图片
.canvas中的绘制图片其实就是把一幅图放在画布 上。
//绘制原图
context.drawlmage(image, dx, dy))
//缩放绘图
context.drawlmage(image, dx, dy, dWidth, dHeight )
//切片绘图
context.drawlmage(image ,sx,Sy, sWidth,sHeigh ,dx,dy,dWidth,dHeight)
小例子
<html>
<head>
<title>Canvas </title>
<style type="text/css">
canvas {
border: 2px solid blue;
}
</style>
</head>
<canvas id="cvs" width="300" height="300"></canvas>
</body>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('cvs');
if(!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
//绘制矩形
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
draw();
</script>
</html>