讲给后台程序员看的前端系列教程(40)—

C语言自学完备手册(33篇)

Android多分辨率适配框架

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境，踏上精进之路——Android开发进阶精华录

讲给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画得灿烂夺目。多想有一天，遇见了马良，我可以借他的神笔，画出一个美好世界。