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. goaccess分析access.log

    接上一篇,开始学习goaccess使用~ 源码安装完成后,我的goaccess的配置文件goaccess.conf位于/usr/local/etc/ /usr/local/etc/goaccess/g ...

  2. WebUploader压缩图片上传

    WebUploader,由Baidu FEX 团队开发,以H5为主,FLASH为辅,兼容 IE6+,iOS 6+, android 4+,采用大文件分片并发上传,极大的提高了文件上传效率,看了官方文档 ...

  3. Codeforces Round #460 (Div. 2)-D. Substring

    D. Substring time limit per test3 seconds memory limit per test256 megabytes Problem Description You ...

  4. 动态规划：最长上升子序列（二分算法 nlogn）

    解题心得: 1.在数据量比较大的时候n^2会明显超时,所以可以使用nlogn 的算法,此算法少了双重循环,用的lower_bound(二分法). 2.lis中的数字并没有意义,仅仅是找到最小点lis[ ...

  5. [BZOJ1503]郁闷的出纳员（Splay）

    Description OIER公司是一家大型专业化软件公司,有着数以万计的员工.作为一名出纳员,我的任务之一便是统计每位员工的工资.这本来是一份不错的工作,但是令人郁闷的是,我们的老板反复无常,经常 ...

  6. poj 3104 晾衣服问题 最大化最小值

    题意:n件衣服各含有ai水分,自然干一分钟一个单位,放烘干机一分钟k个单位,问:最短时间? 思路: mid为最短时间 如果 a[i]-mid>0说明需要放入烘干机去烘干 烘干的时间为x  那么满 ...

  7. SSH无密码登录及远程拷贝命令SCP的使用

    SSH无密码登录 1.生成密钥对(公钥和私钥) $ cd /home/cen/.ssh $ ssh-keygen -t rsa #生成密钥,使用rsa方式进行加密,四个回车 $ ssh-copy-id ...

  8. mysql-show processlist之writing to net

    mysql提示Writing to net解决 最近发现某一个数据库cpu占用比较过.超过200%了. 首先查看数据库慢日志,设定慢日志5秒,基本上没有产生日,没有超过5秒的语句. show proc ...

  9. Spring---浅谈IOC

    概念 IOC(Inversion of Control 控制反转)是spring的核心,贯穿始终.所谓IOC,对于spring框架来说,就是由spring来负责控制对象的生命周期和对象间的关系. 传统 ...

  10. dp专练

    dp练习. codevs 1048 石子归并 区间dp #include<cstdio> #include<algorithm> #include<cstring> ...