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. C++ 学习笔记 （八）重载 重写 重定义以及名字覆盖

    学习C++必定会遇到重载.重写.重定义.概念的东西多也是学习C++蛋疼之处,但是还是得弄懂,学懂了也就不觉得多了. 概念,特点: 重载: 直白点说就是函数名字相同,传参的个数,类型不一样.判断标准在于 ...

  2. neo4j 安装

    查看 http://ip:7474/browser/

  3. k8s的ingress资源简述

    ingress controller是独立与controller-manager的Ingress的主要作用是可以利用nginx,haproxy,envoy,traefik等负载均衡器来暴露集群内部服务 ...

  4. python之斐波纳契数列

    斐波纳契数列 斐波那契数列指的是这样一个数列 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233,377,610,987,1597,2584,4181,676 ...

  5. Laravel 命令行常用命令

    一.简介 1.Artisan 是 Laravel 自带的命令行接口名称,它为我们在开发过程中提供了很多有用的命令.想要查看所有可用的Artisan命令,可使用list命令: php artisan l ...

  6. [原创]使用python对视频/音频文件进行详细信息采集,并进行去重操作

    [原创]使用python对视频/音频文件进行详细信息采集,并进行去重操作 转载请注明出处 一.关于为什么用pymediainfo以及pymediainfo的安装 使用python对视频/音频文件进行详 ...

  7. Paul Zindel【保罗·金代尔】

    Paul Zindel Paul Zindel's death on March 27, 2003 ended the brilliant life of a famous write. 2003年3 ...

  8. Scrapy框架中选择器的用法【转】

    Python爬虫从入门到放弃(十四)之 Scrapy框架中选择器的用法 请给作者点赞 --> 原文链接 Scrapy提取数据有自己的一套机制,被称作选择器(selectors),通过特定的Xpa ...

  9. PowerShell批量启动/关闭Azure VM

    备注:以下例子中出现的JohnsonWeb, JohnsonVm均是虚拟机的名称.在运行Powershell脚本之前,请导入您的订阅文件. 根据条件启动/关闭虚拟机,例如根据虚拟机名称,批量启动/关闭 ...

  10. 在F12 控制台输入，可执行jquery操作

    <!-- 控制台执行jquery -->var importJs=document.createElement('script') //在页面新建一个script标签importJs.se ...