Maison > Article > interface Web > canvas 基础
canvas 基础
- 高洛峰original
- 2016-11-03 16:58:411077parcourir
1.
<canvas id="tutorial" width="150" height="150"></canvas>
替换内容
<canvas id="stockGraph" width="150" style="max-width:90%"> current stock price: $3.15 +0.15 </canvas> <canvas id="clock" width="150" height="150"> <img src="images/clock.png" width="150" style="max-width:90%" alt=""/> </canvas>
标签不可省
2.渲染上下文（The rendering context）
WebGL 使用了基于OpenGL ES的3D上下文 ("experimental-webgl")
我们将会将注意力放在2D渲染上下文中
canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。
var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d');
3.检查支持性
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}4.一个模板骨架
Canvas tutorial
<canvas id="tutorial" width="150" height="150"></canvas>
5.一个简单例子
<html>
<head>
<script type="application/javascript">
function draw() {
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>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：HTML表格元素Article suivant：HTML5 Canvas图表应用Chart.js自定义提示折线图