什么是 Canvas
Canvas(画布)是在HTML5中新增的标签,配合对应的API使用,可以在网页实时生成图像,并操作图像内容。
Canvas 能做什么?
基础图形绘制(如画点、线、椭圆等)和文字的绘制
图形的变形与合成(如缩放、旋转、叠加等)
图片和视频的处理
动画的实现
小游戏的制作
随着互联网的发展,用户对页面的视觉和交互有着更高的要求,传统的 web 前端开发无法得到满足,所以利用强大的 Canvas 绘图能力,可以是网页显示的内容更加的丰富多彩,Canvas 在给用户带来更好的视觉和交互上的体验。
下面是一个示例:
<script type="text/javascript">
// 获取 canvas 元素对应的 DOM 对象
var canvas_xy = document.getElementById("canvas_xy");
// 获取在 canvas 上绘图的 canvasRenderingContent2D 对象
var ctx = canvas_xy.getContext("2d");
//设置绘制起点
ctx.moveTo(100, 100);
//设置绘制下一个点
ctx.lineTo(200, 200);
//设置绘制下一个点
ctx.lineTo(400, 100);
//结束绘制
ctx.closePath();
//设置线的宽度
ctx.lineWidth = 10;
/