canvas基础(1)

算是自己学习做的笔记吧
学习路径:MDN,canvas教程

canvas标签

<canvas id="tutorial" width="150" height="150"></canvas>
//定义图形,比如图表和其他图像
//只是图形的容器,需要使用脚本绘图

//没有设置宽高时,初始化宽度为300px高度为150px
//css也可以设置样式,但建议使用width和height属性

浏览器不支持canvas的时候

<canvas id="tutorial" width="150" height="150">不支持canvas</canvas>
//在浏览器不支持画布的时候,会显示标签包裹的内容,支持时不显示
//可以包裹图片,如下
<canvas id="tutorial" width="150" height="150">
  <img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>

渲染上下文

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

检查支持性

var canvas = document.getElementById('tutorial');
if(canvas.getContext){
	var ctx = canvas.getContext('2d');
	//true
}else{
	//false
}

方法

getContext("2d")//获取渲染上下文

猜你喜欢

转载自blog.csdn.net/qq_41613385/article/details/85328242