canvas基础知识

canvas是什么？

canvas是html5的一个元素，可以说他的功能是html元素中最强大的一个。

举个栗子：

第一步：在页面中引入canvas标签，并且设置好宽高背景等样式

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

#canvas{

background-color: #ddd;

border: 2px solid black;

display: block;

margin: 30px auto;

}

</style>

</head>

<body>

<canvas id="canvas" width="800" height="400">

Canvas not supported 你的浏览器不支持canvas

</canvas>

</body>

</html>

注意：

canvas是行内元素，如果不使用display：block的话，margin：30 auto；是无法让其居中的

第二步：添加javascript代码

<script type="text/javascript">

window.onload = function(){

//获取到canvas对象

var oCanvas = document.getElementById("canvas");

//获取到canvas的绘图环境

var oContext = oCanvas.getContext("2d");

//设置字体大小和字体类型

oContext.font = "48px sans-serif";

//设置填充的颜色

oContext.fillStyle = "cornflowerblue";

//设置描边的颜色

oContext.strokeStyle ="black";

//填充字体 使用到的颜色是 通过 fillStyle设置的颜色 ，第一个参数是填充的文本内容 第二个参数表示 开始填充的横坐标 第三个参数表示开始填充的纵坐标

oContext.fillText("Hello world!",oCanvas.width/2-160,oCanvas.height/2);

//描边 使用到的颜色是 通过 strokeStyle设置的颜色 参数和 fillStyle一样

oContext.strokeText("Hello world!",oCanvas.width/2-160,oCanvas.height/2);

}

</script>

注意:

oCanvas.width 表示画布宽度的一半 在这种canvas宽度与高度时，不要使用px单位，虽然这样写能够被浏览器正确解析，但是者并不符合canvas规范，根据规范，这些取值只能是非负整数

运行结果：

最佳实践

设置canvas宽高的时候最好的方式就是在canvas元素身上加宽高属性，而不是在css中去设置canvas元素的宽高，这是因为canvas中还有一个绘图表面，我们绘制的图形实际上是绘制在绘图表面上的，用css去设置canvas元素的宽高，并不能同时设置好绘图表面的宽高（这里的宽高默认300*150），如下图：

当绘图表面的宽高被拉伸了以后，就会让原来绘制的图形产生一些怪异的效果，下图是用css设置canvas元素宽高导致出现的

2d绘图环境

canvas元素其实只是绘图环境的一个容器，真正要实现各种图形的绘制需要依靠绘图环境对象，这个环境对象提供了全部的绘制功能。目前，我们使用的是2d的绘图环境，这个2d的绘图环境对象提供了强大的api，如下

canvas : 指向该绘图环境所属的canvas对象

fillstyle : 指定改绘图环境后续的图形填充操作中所使用的颜色、渐变或图案

font : 设置字型

globalAlpha : 全局透明度设定

globalCompsiteOperation : 将某个物体绘制到其他物体之上时的绘制方式

lineCap : 绘制线段的端点

lineWidth : 绘制线段的宽度

lineJoin: 绘制两条线段相交时的焦点

miterLimit : 绘制miter形式线段的焦点

shadowBlur : 延伸的阴影效果

shadowColor : 阴影颜色

shadowOffsetX : 阴影水平偏移量

shadowOffsetY : 阴影垂直方向偏移量

strokeStyle : 对路径进行描边时所用的绘制风格

textAlign : 文本水平对齐方式

textBaseline : 文本垂直对齐方式

这些属性可以通过控制台查看

//获取到canvas对象

var oCanvas = document.getElementById("canvas");

//获取到canvas的绘图环境

var oContext = oCanvas.getContext("2d");	console.log(oContext)

坐标系统

在默认情况下，canvas的左上角为原点，X坐标向右增长，Y坐标向下增长，但是，canvas的坐标并不是固定的，可以对坐标系统进行平移以及旋转

关注微信更多学习资料分享



欢迎转载分享，请注明出处！

canvas游戏开发系列（1）:基础知识的更多相关文章

  1. HTML5游戏开发系列教程9(译)

    原文地址:http://www.script-tutorials.com/html5-game-development-lesson-9/ 今天我们将继续使用canvas来进行HTML5游戏开发系列的 ...

  2. HTML5 Canvas游戏开发实战 PDF扫描版

    HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧,在介绍HTML5 Canvas相关特性的同时,还通过游戏开发实例深入剖析了其内在原理,让读 ...

  3. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  4. 炸弹人游戏开发系列（7）：加入敌人，使用A*算法寻路

    前言 上文中我们实现了炸弹人与墙的碰撞检测,以及设置移动步长来解决发现的问题.本文会加入1个AI敌人,敌人使用A*算法追踪炸弹人. 本文目的 加入敌人,追踪炸弹人 本文主要内容 开发策略 加入敌人 实 ...

  5. HTML5游戏开发系列教程10(译)

    原文地址:http://www.script-tutorials.com/html5-game-development-lesson-10/ 最后我们将继续使用canvas来进行HTML5游戏开发系列 ...

  6. HTML5游戏开发系列教程8(译)

    原文地址:http://www.script-tutorials.com/html5-game-development-lesson-8/ 这是我们最新一篇HTML5游戏开发系列文章.我们将继续使用c ...

  7. HTML5游戏开发系列教程7(译)

    原文地址:http://www.script-tutorials.com/html5-game-development-lesson-7/ 今天我们将完成我们第一个完整的游戏--打砖块.这次教程中,将 ...

  8. HTML5游戏开发系列教程6(译)

    原文地址:http://www.script-tutorials.com/html5-game-development-lesson-6/ 这是我们最新一篇HTML5游戏开发系列文章.我们将继续使用c ...

  9. HTML5游戏开发系列教程5(译)

    原文地址:http://www.script-tutorials.com/html5-game-development-lesson-5/ 最终我决定准备下一篇游戏开发系列的文章,我们将继续使用can ...

随机推荐

  1. 操作系统(1)_操作系统结构_李善平ppt

    cpu和内存之间通过地址总线.数据总线.控制总线连接.外部总线连接外部设备.下图有问题,内存和外设没有直接连接.同一组总线,CPU和内存连接的时候硬盘就不能和内存连接,否则有冲突,core和core之 ...

  2. Sum All Odd Fibonacci Numbers-freecodecamp算法题目

    Sum All Odd Fibonacci Numbers 1.要求 给一个正整数num,返回小于或等于num的斐波纳契奇数之和. 斐波纳契数列中的前几个数字是 1.1.2.3.5 和 8,随后的每一 ...

  3. django 图片上传与显示

    由于图片上传的需要,学习了一波上传 1. 上传 前端代码 <form action="写上相应的定向位置" method="post" enctype=& ...

  4. java抓取12306火车余票信息

    最近在弄一个微信的公众帐号,涉及到火车票查询,之前用的网上找到的一个接口,但只能查到火车时刻表,12306又没有提供专门的查票的接口.今天突然想起自己直接去12306上查询,抓取查询返回的数据包,这样 ...

  5. MongDB之各种新增操作

    接口IMongDaoCreate: package com.net.test.mongdb.dao; import java.util.List; import com.net.test.mongdb ...

  6. 一个batch的数据如何做反向传播

    一个batch的数据如何做反向传播 对于一个batch内部的数据,更新权重我们是这样做的: 假如我们有三个数据,第一个数据我们更新一次参数,不过这个更新只是在我们脑子里,实际的参数没有变化,然后使用原 ...

  7. while循环中continue和break的区别

    除了满足while条件外,还有两种方法可以终止循环,它们分别是break和continue.它们唯一的区别是break跳出整个循环,直接执行下面的代码了;而continue是终止当次循环,不执行下面的 ...

  8. Spring Boot 要点--启动类和热部署

    spring boot需要一个启动类 比如 package com.tianmaying; import org.springframework.boot.SpringApplication; imp ...

  9. IOS笔记049-UITabBarController

    1.简单实现 效果:在视图底部显示一个工具栏 代码实现 // 创建窗口 self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScre ...

  10. linux常用命令与系统管理常用命令

    linux命令:切换用户:开启ftp服务:service vsftpd start 开启ssh服务:service sshd start普通用户切换到超级用户:su rootlogout:(注销)un ...