讲给Android程序员看的前端系列教程(40集免费视频教程+源码)
版权声明
- 本文原创作者：谷哥的小弟
- 作者博客地址：http://blog.csdn.net/lfdfhl
Hello canvas
在HTML5新增了canvas标签用于绘制图形，比如：文本、几何图形、路径、图片等等。该标签和其他HTML标签比起来没有多大的不同，除了指定常见的id、class、style等通用属性外，还可以通过height属性和width属性指定canvas的高和宽。嗯哼，我们先来看一个canvas的入门示例：
<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
<style type="text/css">
canvas {
border: 2px;
border-style: solid;
border-color: red;
}
</style>
<script type="text/javascript">
var helloCanvas = function() {
var canvas = document.getElementById("cvs");
var crc2d = canvas.getContext("2d");
crc2d.fillStyle = "yellowgreen";
crc2d.fillRect(10, 10, 100, 100);
}
</script>
</head>
<body>
<input type="button" value="Hello canvas" onclick="helloCanvas()">
<br>
<br>
<canvas id="cvs" width="500" height="300"></canvas>
</body>
</html>
运行后效果如下图所示：
这段代码的逻辑很简单：获取canvas标签，然后在canvas中画了一个矩形。但是，请注意：绘制图形的这个操作是谁完成的呢？是画布本身么？不是，而是通过getContext(“2d”)获取到的CanvasRenderingContext2D对象，即代码：
var crc2d = canvas.getContext(“2d”);
CanvasRenderingContext2D 对象提供了一组用来在画布上绘制的图形函数。接下来，我们来一起学习CanvasRenderingContext2D的常见用法和操作。
绘制圆形
请看如下示例：
<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
<style type="text/css">
canvas {
border: 2px;
border-style: solid;
border-color: red;
}
</style>
<script type="text/javascript">
var draw = function() {
var canvas = document.getElementById("cvs");
var crc2d = canvas.getContext("2d");
crc2d.beginPath();
crc2d.arc(70, 70, 50, 0, 2 * Math.PI);
crc2d.strokeStyle = "blue";
crc2d.stroke();
}
</script>
</head>
<body>
<input type="button" value="canvas" onclick="draw()">
<br>
<br>
<canvas id="cvs" width="500" height="300"></canvas>
</body>
</html>
运行后效果如下图所示：
在该示例中利用CanvasRenderingContext2D.arc( )绘制了圆形
绘制文本
请看如下示例：
<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
<style type="text/css">
canvas {
border: 2px;
border-style: solid;
border-color: red;
}
</style>
<script type="text/javascript">
var draw = function() {
var canvas = document.getElementById("cvs");
var crc2d = canvas.getContext("2d");
crc2d.font = "40px 楷体";
crc2d.fillText("本文作者：谷哥的小弟", 50, 50);
}
</script>
</head>
<body>
<input type="button" value="canvas" onclick="draw()">
<br>
<br>
<canvas id="cvs" width="500" height="300"></canvas>
</body>
</html>
运行后效果如下图所示：
除了此处使用的fillRect( )之外CanvasRenderingContext2D还提供了strokeText( )方法用于绘制文本。
绘制图片
请看如下示例：
<!DOCTYPE html>
<!-- 本文作者：谷哥的小弟-->
<!-- 博客地址：https://blog.csdn.net/lfdfhl-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
<style type="text/css">
canvas {
border: 2px;
border-style: solid;
border-color: red;
}
</style>
<script type="text/javascript">
var draw = function() {
var canvas = document.getElementById("cvs");
var crc2d = canvas.getContext("2d");
var myGirlImage = new Image();
myGirlImage.src = "img/cutegirl.jpg";
myGirlImage.onload = function() {
crc2d.drawImage(myGirlImage, 0, 0);
}
}
</script>
</head>
<body>
<input type="button" value="canvas" onclick="draw()">
<br>
<br>
<canvas id="cvs" width="500" height="300"></canvas>
</body>
</html>
运行后效果如下图所示：
在本示例中使用了.drawImage(image, dx, dy);按照图片原本的大小进行绘制。除此以外，还可以采用方法drawImage(image, dx, dy, dWidth, dHeight);对图片进行缩放绘制；亦可以采用drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);从原图中扣取部分图像进行绘制
绘制世界
本文列举了几种常见的图形绘制，但这仅仅只是CanvasRenderingContext2D的九牛一毛罢了。不论是Android还是HTML5，关于图形的绘制都是一个庞大的体系；毕竟这两个哥们在某种角度来说都是靠UI吃饭的。我们可以在Android里的onDraw( )中画得缤纷绚丽，我们可以用CanvasRenderingContext2D画得灿烂夺目。多想有一天，遇见了马良，我可以借他的神笔，画出一个美好世界。
转载：https://blog.csdn.net/lfdfhl/article/details/100921148