Web之旅—— Canvas初探
2018-01-13 本文已影响49人
葉糖糖
一、Canvas初探
Canvas是HTML5中的核心技术之一。使用Canvas技术可以绘制图形、图表、动画效果和游戏开发。
二、使用Canvas绘制直线
先来看看canvas如何来使用，可以看到在html页面中添加了canvas元素。宽300px，高400px。如果不指定宽高会怎么样？动手试一试。
1、html页面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas教程第一节</title>
<!--引入js文件-->
<script type="text/javascript" src="canvas003.js"></script>
<!--css文件-->
<style type="text/css">
canvas{
border: dashed 1px black; //设置canvas的边框为1px的黑色虚线；
}
</style>
</head>
<body>
<!--添加canvas元素-->
<canvas id="canvas" width="300" height="400"></canvas>
</body>
</html>
2、JavaScript代码：
window.onload=function () {
//获取canvas对象
var canvas=document.getElementById("canvas");
//获取context对象
var cxt=canvas.getContext("2d");
//开始绘制直线
cxt.moveTo(50,50);
cxt.lineTo(100,200);
cxt.stroke();
}
三、实验效果
如下图所示的效果，就是利用canvas实现的。也许现在你还很好奇，也有很多不明白的地方，别着急，继续关注，听我一一道来。
示例演示效果
PS：2018年的第一篇博文终于开更了。欢迎小伙伴们对过去一年的关注与支持！
