美文网首页Canvas学习笔记
Canvas学习笔记--基础篇

Canvas学习笔记--基础篇

作者: 小人物的秘密花园 | 来源:发表于2018-06-26 15:37 被阅读0次

参考

Canvas的基本用法
HTML5 Canvas
HTML5 Tricks

知识点

<canvas>元素

定义

用于绘制图形,需要结合脚本来实现,即是canvas元素是绘制图形的容器,需要利用脚本来实现图形的绘制;

属性

canvas元素实际只有: width,height两个属性,但可以通过DOM Property来设置;

注意:

  1. 若是创建canvas元素时未指定高度和宽度,则会一默认的尺寸(宽:300px, 高: 150px);

  2. canvas的尺寸也可以通过CSS来设置,但在绘制时图像会伸缩以适应它的框架尺寸:如果CSS的尺寸与初始画布的比例不一致,它会出现扭曲,出现这种情况,尝试设置canvas的宽度和高度,不适用CSS;

canvas VS img

  1. canvas没有src,alt属性;
  2. canvas元素是双标签元素,必须闭合,若缺少闭合标签,文档的其余内容会被认为是替代内容(浏览器不支持canvas元素时显示的内容),不会显示;而img是单标签元素;

渲染上下文(The rendering context)

<canvas> 元素创造了一个固定大小的画布,它公开了一个或多个渲染上下文,其可以用来绘制和处理要展示的内容。

默认情况下,canvas创建的画布是空白的,故在使用时,需要执行下述操作:

  1. 获取DOM对象
<canvas id="myCanvas" width="800" height="800"></canvas>

var myCanvas = document.getElementById('myCanvas');
  1. 通过'canvas'的getContext()方法获取渲染上下文及其绘画功能
var oContext = myCanvas .getContext('2d');

说明:getContext()只有一个参数,上下文的格式;

检测浏览器是否支持

var canvas = document.getElementById('myCanvas');

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // 其他操作
} else {
  // 不支持的操作
}

canvas栅格画布及空间坐标系

Canvas的坐标以左上角为原点(0,0),水平向右为X轴,垂直向下为Y轴,以像素为单位,所以每个点都是非负整数

栅格画布中每个单元格相当于canvas元素中的1px

canvas坐标系.png

相关文章

网友评论

    本文标题:Canvas学习笔记--基础篇

    本文链接:https://www.haomeiwen.com/subject/yrqmyftx.html