Canvas基础认识

HTML5 Canvas

简单的说就是js+html5可以自定义绘制任何图形

认识Canvas元素

<canvas id="canvas" width="500" height="500">

</canvas>

上面即是一个标准的Canvas的元素，暂时先当一个div去理解，只不过这个Canvas可以作图而已。

认识2D渲染上下文

通过js去访问，这个js对象是你真正绘制图形的地方。

小提示：绘图使用js访问操作2D渲染上下文对象，最后通过Canvas这个元素展示出来，也就是说Canvas只是一个展示的作用！

认识坐标系统

如何设定自定义图形在页面上的位置？使用坐标系统，坐标系统的概念同js的offsetTop，offsetLeft一模一样，就是以电脑屏幕最左上角的那个像素作为原点（0,0），横向是x轴为第一个0，纵向是y轴为第二个0。

访问2D渲染上下文对象

上面三个知识点够用了，马上实例操作

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>认识Canvas</title>
<body>
<canvas id="canvas" width="500" height="500">

</canvas>
</body>
</html>
<script>
var canvas = document.getElementById('canvas');//获取canvas的dom元素
var context = canvas.getContext('2d');//获得2d渲染上下文对象
context.fillRect(0,0,800,800);//创建一个矩形,从左上角x轴0，y轴0的位置，绘制一个宽300，高200的矩形
</script>

第14行很重要，获取2d对象，你可能会想到有没有3d，很抱歉，还没出来。

第15行fillRect方法绘制矩形用的，这里补充一下，关于颜色默认用的黑色填充内容，fillRect(x,y,width,height)。

小提示：假如Canvas的宽高数值比fillRect设置的数值小的话，那么fillRect的填充将会占满Canvas，溢出部分看不见的。就如同这里的Canvas宽高都是500像素，但是fillRect却是800像素，最终绘制出的只有Canvas当初设置的500像素的内容，溢出的300像素就不可见。

刷新页面你将可能到一个500像素的黑色色块，看起来效果应该不错吧？

好了，使用strokeRect替换fillRect，其他保持原样，再次刷新页面，看到了什么呢？动手试一试吧~

这两个函数参数都一样的，只是展示方式不一样~~

每天一点点，很多天就是很多点点~

Canvas基础认识的更多相关文章

HTML5移动开发学习笔记之Canvas基础
1.第一个Canvas程序看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...
canvas基础之旅
canvas 主要使用2D rendering context API 实现其功能和特效. canvas 一般浏览器都支持,但在ie9之前的是不支持的.(解决办法:添加IxplorerCanvas ...
canvas 基础知识整理（二）
html部分: <canvas id="myCanvas" width="800" height="800" ></can ...
canvas 基础知识整理（一）
canvas这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上. html的基本 ...
《HTML5 CANVAS基础教程》读书笔记
一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...
canvas 基础知识
canvas 基础低版本的ie不支持html5,需要引入excanvas.js来让ie支持canvas. 检测支持canvas <canvas id="canvas" wi ...
canvas基础语法
前面的话 canvas顾名思义是定义在浏览器中的画布.它不仅是一个普通的元素,更是一个强大的编程工具.它的出现已然超过了web基于文档的设计初衷,将网页这一形态的应用推向了另一个高度.利用canvas ...
canvas API ，通俗的canvas基础知识（一）
在没学canvas的时候,觉得canvas是这么的神秘,这么的绚丽,这么的高深,用canvas做出来的效果是如此的炫酷,能做的事情如此的宽广,简直让我心生敬畏之心,时常感叹:我要是得此技能,必定要上天 ...
canvas基础动画示例
canvas基础动画示例本文主要用最简单的例子,展示canvas动画效果是如何实现的动画效果,是一个球绕着一点旋转 const canvas = document.getElementById(' ...
canvas基础学习
/** * Created by ty on 2016/7/11. * canvas 基础 */ window.onload = function() { var canvas = document. ...

随机推荐

浏览器控制台js代码与后台不同步
原因:浏览器会缓存js 如果是将js代码直接通过<script>标签插入jsp页面中则不存在这个问题在加载页面的时候会重新加载js代码如果直接将js代码以文件的形式引入,那么每次在修改 ...
x01.TodoList：Asp.Net 5 初探
ASP.NET 5 是比较新的,除了汤姆的博文,学习资料并不多.而学习没有例子上手,是比较痛苦的. 1.运行 vs2015,新建项目,选择 Asp.Net 5 WebApp 模板,默认运行即可.对照汤 ...
linux 守护程序小记(指定进程不存在则启动 )
最近想在debian 下做个守护进程.用于守护指定的程序一直处于运行状态.网上查了下,有Crontab方式和写脚本执行方式. Crontab Crontab 是系统自带的,类似于Windows的计划任 ...
plain framework 商业版开发总结1 updated
每天对着不同的计划,多多少少有一种无形的压力.特别是对技术不好的我来说,过程中遇到的问题实在不少,时常纠结良久.时间慢慢流逝,最后虽然感觉有些不足,但是也不至于差强人意.商业版的PF核心已经升级到1. ...
BZOJ 2434: [Noi2011]阿狸的打字机 [AC自动机 Fail树树状数组 DFS序]
2434: [Noi2011]阿狸的打字机 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 2545 Solved: 1419[Submit][Sta ...
[bzoj1007][HNOI2008][水平可见直线] (斜率不等式)
Description 在xoy直角坐标平面上有n条直线L1,L2,...Ln,若在y值为正无穷大处往下看,能见到Li的某个子线段,则称Li为可见的,否则Li为被覆盖的. 例如,对于直线: L1:y ...
maven/gradle 打包后自动上传到nexus仓库
前提: nexus的相关repository必须设置允许redeploy,参考下图: maven项目: pom.xml中增加以下节点: <distributionManagement> & ...
【经验之谈】Git使用之TortoiseGit配置VS详解
前言上一篇<[经验之谈]Git使用之Windows环境下配置>: 安装配置和使用后记关于vs中使用git网上的教程大家也可以找到,我当时配置的时候也是按照网上找的教程一步一步来的, ...
【原】Spark之机器学习(Python版)(一)——聚类
kmeans聚类相信大家都已经很熟悉了.在Python里我们用kmeans通常调用Sklearn包(当然自己写也很简单).那么在Spark里能不能也直接使用sklean包呢?目前来说直接使用有点困 ...
.NET跨平台之旅：生产环境中第2个跑在Linux上的ASP.NET Core站点
今天我们在生产环境中上线了第2个跑在Linux上的ASP.NET Core站点.这是一个简单的Web API站点,通过命令行的方式调用安装在Linux服务器上的程序完成操作.之前用的是nodejs,现 ...

Canvas基础认识

Canvas基础认识的更多相关文章

随机推荐

热门专题