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. WordPress免费清新响应式博客/杂志/图片三合一主题Nana

    WordPress免费清新响应式博客/杂志/图片三合一主题Nana 一.主题安装须知 1.本主题必须安装文章点击统计插件:WP-PostViews,可以直接在后台插件→安装插件中直接搜索安装官方最新版 ...

  2. MintLinux

    最近将我的mintlinux进行了一系列外观优化,总算好看了一点

  3. [BZOJ] 3875: [Ahoi2014&Jsoi2014]骑士游戏

    设\(f[x]\)为彻底杀死\(x\)号怪兽的代价 有转移方程 \[ f[x]=min\{k[x],s[x]+\sum f[v]\} \] 其中\(v\)是\(x\)通过普通攻击分裂出的小怪兽 这个东 ...

  4. C程序设计语言 -- 运算符优先级

    1. 运算符分类 算术运算符            [+, -,*, /, % , ++, --] 关系运算符             [>,  >=, <, <=] 相等性运 ...

  5. Python 正则表达式 search vs match

    search()和match()函数都是正则表达式中的匹配函数,二者有何区别呢? 1.match()从string的开始位置进行正则匹配,即从0位置开始匹配,若匹配上则返回一个match对象,否则返回 ...

  6. php 多维数组指定某个值作为键

    $temp_key = array_column($mobile_arr,'cidf'); //键值 $mobile_arr = array_combine($temp_key,$mobile_arr ...

  7. Android Studio 安装与使用ADB wifi 无线调试

    首先,安装ADB WIFI File->Settings->Plugins 其次,用USB连接手机与电脑(并开启手机的调试模式) 任务栏若无提示,即可拔下USB线,开始无线调试 任务栏若是 ...

  8. 千万不要错过这几道Python面试题，Python面试题No16

    第1题: python下多线程的限制以及多进程中传递参数的方式? python多线程有个全局解释器锁(global interpreter lock),简称GIL,这个GIL并不是python的特性, ...

  9. Neon Lights in Hong Kong【香港霓虹灯】

    Neon Lights in Hong Kong Neon is to Hong Kong as red phone booths are to London and fog is to San Fr ...

  10. Android 显示和隐藏软键盘的方法

       前言:因为项目要求做一个类似贴吧一样的东西,可以评论,所以必不可少地需要用到软键盘的隐藏和显示. Step 1 废话不多说,先上封装好的代码. public class CommonUtils ...