本文介绍了HTML5的canvas元素，作为画布提供图形处理功能，包括图形绘制、文字、变形、图片处理和动画。详细阐述了canvas的基本概念，如获取DOM对象和绘制环境，以及如何修改画布尺寸。同时，文章展示了绘制点、线、矩形、渐变和图像等实例，适合初学者入门。
一、canvas 是什么？
canvas是HTML5中重要的元素，和audio、video元素类似完全不需要任何外部插件就能够运行.
Canvas中文翻译就是 ‘ 画布 ’ ，提供了强大的图形的处理功能 ( 绘制 , 变换 , 像素处理 )等
but
canvas 元素本身并不绘制图形，它只是相当于一张空画布。
如果开发者需要向 canvas 上绘制图形，则必须使用 JavaScript 脚本进行绘制。
二、canvas 能够做什么？
基础图形的绘制
文字的绘制
图形的变形和图片的合成
图片和视频的处理
动画的实现
小游戏的制作
三、支持的浏览器
大多数现代浏览器都是支持Canvas的，
比如 Firefox, safari, chrome, opera 的最近版本以及 IE9 都支持。
IE8 及以下不支持HTML5
but
我们可以进行提示用户更新到最新的版本
四、关于canvas 标签的基本概念
在 HTML 页面上定义 canvas 元素与定义其他普通元素并无任何不同，
它吃了可以指定 id, style ,class ,hidden 等通用属性之外，
还可以设置 width 和 height 两个属性。
我们在网页中定义 canvas 元素之后，它只是一张空白的画布，
想要在画布上绘画，一定要经过下面几步。
- 获取 canvas 元素对应的 DOM 对象，这必须是一个 canvas 对象
- 调用 canvas 对象的 getContext( ) 方法，该方法返回一个 canvasRenderingContext2D 对象，该对象可以绘制图形。
- 调用 canvasRenderingContext2D 对象的方法进行绘图。
so
we together 来看看 canvas 该如何会绘制图形。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body{
margin: 0px}
canvas{
background: #ccc }
</style>
</head>
<body>
<canvas>
我们在设置 canvas 之前需要首先监测用户电脑是否支持 canvas
</canvas>
</body>
</html>
那我们现在可以看见了么？
我们虽然没有给定 canvas 的宽度和高度，
但是实际上我们的canvas 在页面中是可见的。
注意：
canvas 默认样式的宽度和高度 是 300px * 150px.
即使我们不去设置具体的宽度和高度，它也是可以显示的。
修改 Canvas 的画布
按照我们正常的思路来说，我们会直接去使用 canvas_1.style.width = “500px”;
来去修改我们的 canvas 的宽度，但是这样对么？
答案当然是NO，
canvas 相当于是一张图片，如果我们设置
<canvas width="500" height="500">.
这样写相当于图片的实际大小是 500 * 500.
但是，假如我们这样去书写。
<canvas style="width:500px;height:500px;">
这样实际是把 canvas 默认的 300 * 150 的图片强行拉伸为 500px * 500px 了，
所以这样会导致我们的内容被强行缩放，从而导致问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body{
margin: 0px}
canvas{
background: #ccc }
</style>
</head>
<body>
<canvas id="canvas_1">
我们在设置 canvas 之前需要首先监测用户电脑是否支持 canvas
</canvas>
</body>
<script type="text/javascript">
var canvas_1 = document.getElementById("canvas_1");
设置宽度和高度,但是这种写法会造成额外的问题,画布会拉伸
// canvas_1.style.width = "500px";
// canvas_1.style.height = "500px";
所以推荐写法:
// 1.使用内联样式表
// 2.去使用点(.)
canvas_1.width = "500"; //注意，不要加 px
canvas_1.height = "500";
</script>
</html>
获取绘制环境
我们在上面已经设置了我们的画布的大小，但是存在一个问题。
还没有找到我们的画布
要是我们连具体的画布都没有，又该向哪里去绘画？
实际上可以通过
var ctx = canvas_1.getContext("2d");
来去获取到我们的绘制环境。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id=
最低0.47元/天 解锁文章
扫一扫
3022
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
