整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
绍HTML5中的一个新增元素——canvas元素以及伴随这个元素而来的一套编程接口——canvas API。
使用canvas API可以在页面上绘制出任何你想要的、非常漂亮的图形与图像，创造出更加丰富多彩、赏心悦目的Web页面。
通过阅读，您可以：
掌握canvas元素的基本概念
学会如何在页面上放置一个canvas元素
学会如何使用canvas元素绘制出一个简单矩形
掌握使用路径的方法，能够利用路径绘制出圆形与多边形
掌握渐变图形的绘制方法，学会图形变形、图形缩放、图形组合以及给图形绘制阴影的方法
掌握在canvas画布中使用图像的方法
掌握如何在画布中绘制文字，给文字加上边框的方法
掌握如何保存及恢复绘图状态
canvas的基础知识
HTML5中的canvas有很多功能，这里只介绍HTML5中canvas的一些基础知识，
并展示一些可以使用画布元素实现的实用的内容，例如处理来自画布中的一幅图像的单个像素。
canvas的由来
canvas的概念最初是由苹果公司提出的，
用于在Mac OS X WebKit中创建控制板部件（Dashboard Widget）。
在canvas出现之前，开发人员若要在浏览器中使用绘图API，
只能使用Adobe的Flash和SVG（可伸缩矢量图形）插件，或者只有IE才支持的VML（矢量标记语言），
以及JavaScript中的一些技术。假设我们要在没有canvas元素的条件下绘制一条对角线，
此时如果没有一套二维绘图API的话，这会是一项相当复杂的工作。
HTML5中的canvas就能够提供这样的功能，对浏览器端来说这个功能非常有用，
因此canvas被纳入了HTML5规范。
最靠谱的WEB前端教程——整整140集，全程干货无废话，学完变大佬！
TML4几乎没有绘图的功能，通常只能显示已有的图片；而HTML5则集成了强大的绘图功能。在HTML5中可以通过下面的方法进行绘图：
借助HTML5的绘图功能，既可以美化网页界面，也可以实现专业人士的绘图需求。本书将在第5章介绍使用Canvas API画图的方法，游戏开发中主要使用Canvas API画图来实现游戏界面。
【例】要使用Canvas API画图实现绘制坦克图案。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h1>html5-坦克大战</h1>
<!--坦克大战的战场-->
<canvas id="tankMap" width="400px"height="300px"style="background-color:black"></canvas>
<script type="text/javascript">
//得到画布
varcanvas1=document.getElementById("tankMap");
//定义一个位置变量
var heroX=80; var heroY=80;
//得到绘图上下文
var cxt=canvas1.getContext("2d");
//设置颜色
cxt.fillStyle="#BA9658";
//左边的矩形
cxt.fillRect(heroX,heroY,5,30);
//右边的矩形
cxt.fillRect(heroX+17,heroY,5,30);
//画中间的矩形
cxt.fillRect(heroX+6,heroY+5,10,20);
//画出坦克的盖子
cxt.fillStyle="#FEF26E";
cxt.arc(heroX+11,heroY+15,5,0,360,true);
cxt.fill();
//画出炮筒
cxt.strokeStyle="#FEF26E";
cxt.lineWidth=1.5;
cxt.beginPath();
cxt.moveTo(heroX+11,heroY+15);
cxt.lineTo(heroX+11,heroY);
cxt.closePath();
cxt.stroke();
</script>
</body>
</html>
浏览网页效果如图1-5所示。
如果想要学习视频，交流讨论，请按照下图所示输入私信“申请加入”获取加群链接~~~
TML5中的一个新增元素——元素以及伴随这个元素而来的一套编程接口——canvas API。使用canvas API可以在页面上绘制出任何你想要的、非常漂亮的图形与图像，创造出更加丰富多彩、赏心悦目的Web页面。
canvas的概念最初是由苹果公司提出的，用于在Mac OS X WebKit中创建控制板部件（Dashboard Widget）。在canvas出现之前，开发人员若要在浏览器中使用绘图API，只能使用Adobe的Flash和SVG（可伸缩矢量图形）插件，或者只有IE才支持的VML（矢量标记语言），以及JavaScript中的一些技术。假设我们要在没有canvas元素的条件下绘制一条对角线，此时如果没有一套二维绘图API的话，这会是一项相当复杂的工作。HTML5中的canvas就能够提供这样的功能，对浏览器端来说这个功能非常有用，因此canvas被纳入了HTML5规范。
在canvas元素里进行绘画，并不是指拿鼠标来作画。在网页上使用canvas元素时，它会创建一块矩形区域。默认情况下该矩形区域宽为300像素，高为150像素，用户可以自定义具体的大小或者设置canvas元素的其他特性。在页面中加入了canvas元素后，我们便可以通过JavaScript来自由地控制它。可以在其中添加图片、线条以及文字，也可以在里面绘图，甚至还可以加入高级动画。
【前端开发】最新前端入门教程，html css基础教程+移动端前端视频教程。_哔哩哔哩_bilibili
*请认真填写需求信息，我们会在24小时内与您取得联系。
