canvas-入门

定义

canvas是HTML5新增的一个重要元素,先看下它的定义:

<canvas> is an HTML element which can be used to draw graphics using scripting (usually JavaScript). This can, for instance, be used to draw graphs, make photo composition or simple (and not so simple) animations.

大意:

使用JS脚本可以绘制图形、简单的动画

注:canvas只是一个普通无色透明区域,可理解为画布,同时绘制图形不是用鼠标,而是用JS脚本。

因为是新增元素,兼容性方面如下:

页面添加canvas

<canvas id="j-canvas" width="400" height="300">    不支持canvas</canvas>

注:

  1. 对不支持的浏览器显示,"不支持canvas"文案
  2. canvas不像img标签,canvas需要结束标签 < /canvas>
  3. canvas可以应用border、background-color、margin等属性
  4. canvas在没有指定宽高时,默认300 * 150

操作canvas

// 获得canvasvar canvas = document.getElementById('j-canvas');// 获得画布var ctx = canvas.getContext('2d');

检测支持性

var canvas = document.getElementById('j-canvas');if (canvas.getContext) {  var ctx = canvas.getContext('2d');  // 支持处理} else {    // 不支持处理}

坐标系

既然我们要在canvas上画东西,肯定要知道画的位置,所以就牵扯到坐标系的东西。 在canvas中坐标系分2D、3D坐标系统,除了默认的还有 坐标系转换 的概念,我们这次只探讨2D默认坐标系,如下:

原文发布于微信公众号 - 前端黑板报(FeHeiBanBao)

原文发表时间:2017-04-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏WindCoder

一个创建产品动画说明视频的新手指南

英文原文:A Step-by-step Guide to Creating Animated Product Explainer Videos

21310
来自专栏数据小魔方

条件格式单元格图表

今天跟大家分享条件格式单元格图表! ▼ 这类图表比较特殊,不是通过excel的内置图标库制作,而是通过excel的条件格式工具制作的存放在单元格中的图表。这种图...

42480
来自专栏BestSDK

shift键在Excel中,还有这10种变态玩法?

电脑键盘上有很多「瑞士军刀」似的按键,掌握这些按键的使用技巧,你让你在Excel操作中,如虎添翼。 SHIFT键就是其中之一。 Excel中的技巧有很多,基本都...

42270
来自专栏生信宝典

WB图片处理-教你利用PPT做出漂亮的WB图片!

WB是很科研多小伙伴都会用到的实验技术,而对于最终WB图片的处理也是各自有各自的手段,不过主流主要分为两大派:PPT或者Adobe Photoshop/Illu...

2K20
来自专栏服务端技术杂谈

iOS 开发从 UIView 动画说起

毋庸置疑的:在iOS开发中,制作动画效果是最让开发者享受的环节之一。一个设计严谨、精细的动画效果能给用户耳目一新的效果,吸引他们的眼光 —— 这对于app而言是...

41470
来自专栏Windows Community

UWP 手绘视频创作工具技术分享系列 - SVG 的解析和绘制

本篇作为技术分享系列的第一篇,详细讲一下 SVG 的解析和绘制,这部分功能的研究和最终实现由团队的 @黄超超 同学负责,感谢提供技术文档和支持。  首先我们来看...

41590
来自专栏Android机器圈

Android之MaterialDesign应用技术2-仿支付宝上滑搜索框缓慢消失

PS:在这之前也就是上一篇介绍了MaterialDesign一些滑动删除、标题栏的悬浮效果等,如果没看过第一篇的小火鸡可以看一下,因为这篇是接着上一篇写的,有一...

412100
来自专栏LeoXu的博客

[读书笔记]响应式web设计 转

@media screen and (max-device-width:400px){ 

10910
来自专栏非典型技术宅

iOS动画系列之六:利用CABasic Animation完成带动画特效的登录界面1. 画风突变的笑脸2. 心跳3. iOS实践:实现一个带动效的登录界面

14460
来自专栏小灰灰

Css实战训练之图片点击放大

Css实战训练之图片点击放大 I. 背景 非常常见的一个功能了,一般网站上显示的都是缩略图,等你点击缩略图之后,会在一个弹框中显示放大的图片 那么这个功能是怎么...

99740

扫码关注云+社区

领取腾讯云代金券