• HTML5 Canvas
        简单的说就是js+html5可以自定义绘制任何图形
  • 认识Canvas元素
  1. <canvas id="canvas" width="500" height="500">
  2. <!-- 不支持canvas的浏览器，这里会显示~~ -->
  3. </canvas>
上面即是一个标准的Canvas的元素，暂时先当一个div去理解，只不过这个Canvas可以作图而已。
  • 认识2D渲染上下文
通过js去访问，这个js对象是你真正绘制图形的地方。
小提示：绘图使用js访问操作2D渲染上下文对象，最后通过Canvas这个元素展示出来，也就是说Canvas只是一个展示的作用！
  • 认识坐标系统
如何设定自定义图形在页面上的位置？使用坐标系统，坐标系统的概念同js的offsetTop，offsetLeft一模一样，就是以电脑屏幕最左上角的那个像素作为原点（0,0），横向是x轴为第一个0，纵向是y轴为第二个0。
  • 访问2D渲染上下文对象
上面三个知识点够用了，马上实例操作
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>认识Canvas</title>
  6. <body>
  7. <canvas id="canvas" width="500" height="500">
  8. <!-- 不支持canvas的浏览器，这里会显示~~ -->
  9. </canvas>
  10. </body>
  11. </html>
  12. <script>
  13. var canvas = document.getElementById('canvas');//获取canvas的dom元素
  14. var context = canvas.getContext('2d');//获得2d渲染上下文对象
  15. context.fillRect(0,0,800,800);//创建一个矩形,从左上角x轴0，y轴0的位置，绘制一个宽300，高200的矩形
  16. </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基础认识的更多相关文章

  1. HTML5移动开发学习笔记之Canvas基础

    1.第一个Canvas程序 看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> < ...

  2. canvas基础之旅

    canvas 主要使用2D rendering context  API 实现其功能和特效. canvas 一般浏览器都支持,但在ie9之前的是不支持的.(解决办法:添加IxplorerCanvas ...

  3. canvas 基础知识整理（二）

    html部分: <canvas id="myCanvas" width="800" height="800" ></can ...

  4. canvas 基础知识整理（一）

    canvas这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上. html的基本 ...

  5. 《HTML5 CANVAS基础教程》读书笔记

    一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...

  6. canvas 基础知识

    canvas 基础 低版本的ie不支持html5,需要引入excanvas.js来让ie支持canvas. 检测支持canvas <canvas id="canvas" wi ...

  7. canvas基础语法

    前面的话 canvas顾名思义是定义在浏览器中的画布.它不仅是一个普通的元素,更是一个强大的编程工具.它的出现已然超过了web基于文档的设计初衷,将网页这一形态的应用推向了另一个高度.利用canvas ...

  8. canvas API ，通俗的canvas基础知识（一）

    在没学canvas的时候,觉得canvas是这么的神秘,这么的绚丽,这么的高深,用canvas做出来的效果是如此的炫酷,能做的事情如此的宽广,简直让我心生敬畏之心,时常感叹:我要是得此技能,必定要上天 ...

  9. canvas基础动画示例

    canvas基础动画示例 本文主要用最简单的例子,展示canvas动画效果是如何实现的 动画效果,是一个球绕着一点旋转 const canvas = document.getElementById(' ...

  10. canvas基础学习

    /** * Created by ty on 2016/7/11. * canvas 基础 */ window.onload = function() { var canvas = document. ...

随机推荐

  1. Mac下QT错误,Xcode配置解决办法

    出现错误: Xcode not set up properly. You may need to confirm the license agreement by running / 解决办法如下: ...

  2. 前端编辑工具之VSCode

      因为前段时间看了瞬息之间的一篇文章编辑器背后的程序观, 里面只提到了Visual studio. 我想想可能是因为非.Net开发者,所以不知道Visual sutdio code这个工具.来看看V ...

  3. ngx_http_upstream_module模块.md

    ngx_http_upstream_module ngx_http_upstream_module模块用于定义可由proxy_pass,fastcgi_pass,uwsgi_pass,scgi_pas ...

  4. docker学习(7) docker-compose使用示例

    上一回学习了如何利用docker搭建一个mysql + java service + nginx,总共4个docker容器,如果采用docker run的方式一个一个容器去创建十分麻烦.为了能更高效的 ...

  5. [LeetCode] Pacific Atlantic Water Flow 太平洋大西洋水流

    Given an m x n matrix of non-negative integers representing the height of each unit cell in a contin ...

  6. 分享一些自己的学习过程和学习方法（来自daimajia）

    每天,都会有人在微博上私信我,问我关于学习和成长的问题.这种问题我一般都不会回复某个j,毕竟每个人的情况不一样,每个人对待事物的性格也不一样,我不能夸下海口的说,你看某本书几个月就能如何如何,我能做的 ...

  7. C#中Abstract和Virtual的区别

    c# 中 Abstract和Virtual比较容易混淆,都与继承有关,并且涉及override的使用.下面讨论一下二者的区别: 一.Virtual方法(虚方法) virtual 关键字用于在基类中修饰 ...

  8. MySQL/MariaDB/PerconaDB-提权条件竞争漏洞

    背景 2016年11月01日,国外安全研究员Dawid Golunski在 MySQl, MariaDB 和 PerconaDB 数据库中发现条件竞争漏洞,该漏洞允许本地用户使用低权限(CREATE/ ...

  9. iOS之UITableView组头组尾视图/标题悬停

    最近笔者在公司的iOS开发中,有一个iOS开发同事跑来问了两个问题:1.给UITableView设置了组头和组尾视图,但是一直显示不出来?2.UITableView的section的header和fo ...

  10. iOS-绘图

    0 CGContextRef context = UIGraphicsGetCurrentCont ext(); 设置上下文  1 CGContextMoveToPoint 开始画线  2 CGCon ...