2222222222222222222222

2222222222222222222222

创建canvas笔记 ：

111111111111111111

接上次……

canvas html base

Canvas基本代码

在js中进行兼容性判断

如图，在canvas加入内容，如果浏览器支持，则不会显示，如果不支持则会消失如上内容

在js中直接指定canvas的大小

如图，使用js获得上下文的绘图环境

提示浏览器不支持canvas

在canvas中加入内容，防止兼容性问题。当浏览器支持时，canvas内的内容不会显示

canvas.getContext可以获取canvas的绘制上下文

使用width和height来指定canvas的大小

canvas在页面上表现为一个标签，可进行样式的书写

需要js中获取到标签的dom元素后，得到绘图上下文环境，之后的操作都是在该绘图环境下进行操作

var cv = document.getElementById('canvas');
var context = cv.getContext('2d');

设置画布的大小可以用 cv.width 与 cv.height 属性来设置像素值。不需要单位

用javascript取得canvas画布 

css确定canvas的大小是canvas的画布大小，不推荐用canvas确定canvas的大小;

初始化canvas画布：

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

var context=canvas.getContext('2d');

canvas的三个基础的属性

canvas基础定义

canvas:

html:canvas id="canvas" 

js:

var canvas=document.getElementsById("canvas")

var context=canvas.getContext("2d")

canvas不用css编辑wh（指定canvas里图片的精度）

canvas结构与获取方法

canvas 不建议用css控制大小，直接写width和height,是不带有单位的

canvas默认大小是width：300px; height:150px;

不建议使用css来设置canvas的大小，通过属性设置是推荐的方式

w3c建议不用css的形式去设定大小，要用内联的方式去设定大小。这其中的原因是，设定宽高不仅涉及到显示的画布大小，还有呈现的内容的分辨率问题。