[Canvas学习]基本用法
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
[Canvas学习]基本⽤法
简介
<canvas>是⼀个可以使⽤JavaScript在其中绘制图形的HTML元素，可以⽤于制作照⽚集或者制作动画。
Canvas默认⼤⼩是300px*150px，但是可以使⽤HTML的⾼度和宽度属性来⾃定义Canvas的尺⼨。
基本⽤法
<canvas id="tutorial" width="150" height="150"></canvas>
canvas需要使⽤结束标签，只有两个属性width,height。
可以使⽤DOM的属性来进⾏设置，也可以使⽤CSS来定义⼤⼩。
同时canvas也可以拥有margin, border, background等属性
对于不⽀持canvas的浏览器，只需要在canvas标签中提供替换内容，这样⽀持canvas的浏览器就会忽略容器中包含的内容。
⽽只是正常渲染canvas
<canvas id="stockGraph" width="150" height="150">
current stock price: $2.15+0.12
</canvas>
<canvas id="clock" width="150" height="150">
<img src="images/clock.png" width="150" height="150" alt="clock">
</canvas>
渲染上下⽂
canvas元素创造了⼀个固定⼤⼩的画布，公开了⼀个或多个渲染上下⽂，可以⽤来绘制和处理想要展⽰的内容。
var canvas = document.getElementById("tutorial");
var ctx = canvas.getContext("2d");
兼容性写法
var canvas = document.getElementById("tutorial");
if(canvas.getContext){
var ctx = canvas.getContext("2d");
}
DEMO
<html>
<head>
<meta charset="utf8" />
<title>Canvas⼊门⼩实例</title>
</head>
<body>
<canvas id='canvas' width="150" height="150"></canvas>
</body>
<script>
var canvas = document.getElementById("canvas"); if(canvas.getContext){
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect(10,10,55,50);
ctx.fillStyle = "rgba(0,0,200,0.5)";
ctx.fillRect(30,30,55,50);
}
</script>
</html>。