本篇将完成一个通用的canvas试验demo
完整代码
demo.html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Canvas</title>
<style>
body{
background: #ddd;
}
#canvas{
margin: 10px;
padding: 10px;
background: #fff;
border: thin inset #aaaaaa;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="300">
Canvas not supported
</canvas>
</body>
<script src="example.js"></script>
</html>
example.js
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
// 字体与大小
context.font = '38pt Arial';
// 填充样式 语法 color|gradient|pattern 颜色|渐变对象|pattern对象
context.fillStyle = "red"
// 笔触的颜色、渐变或模式
context.strokeStyle = 'blue';
// 绘制填充文字
context.fillText('Hello Canvas',canvas.width/2 - 150,canvas.height/2 + 15);
// 绘制文字
context.strokeText('Hello Canvas',canvas.width/2 - 150,canvas.height/2 + 15);
解析
1、对html来说，必须定义一个<canvas>标签来盛放画布编辑区域。值得注意的是，canvas的宽高最好如代码所示，直接在标签中定义，而不是写在css中，虽然很多情况下这两种写法的效果是一样的。但是写在css中实际改变的不是画布绘制区域，而是盒子区域，画布绘制区域跟随盒子进行了拉伸，所以在某些情况下可能出现效果变形。
标签中的 Canvas not supported 是只有浏览器不支持的情况下才会显示
2、
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
这一部分代码定义了绘制环境。canvas仅仅是作为绘画对象的容器存在的，儿环境则提供了全部的绘画方法。也就是上面代码中的context，它就是一个2d绘图环境
canvas.getContext()这个方法返回的是一个CanvasRenderingContext2D对象，而2d也是目前唯一的合法值。3d绘图方式则需要研究webGL技术。
下面是CanvasRenderingContext2D对象方法和属性的参考链接
HTML Canvas 参考手册 (w3school.com.cn)
完成
完成效果
下一章会学习绘制一个时钟，来进一步熟悉canvas基础操作
另，本笔记所有演示都在chrome浏览器上展示
网友评论