Html5-画布(canvas)之常用绘图方法介绍

画布 Demo | canvas.getContext(), CanvasRenderingContext2D, canvas.width, canvas.height, canvas.toDataURL()
canvas/demo.html

DOCTYPE HTML>
<html>
<head>
<title>画布 Demotitle>
head>
<body>
<canvas id="canvas" width="320" height="240" style="background-color: rgb(222, 222, 222)">
您的浏览器不支持 canvas 标签
canvas>
<br/>
<button type="button" onclick="demo();">Demobutton>

<br />
<img id="img" alt="" src="" />

<script type="text/javascript">

var canvas = document.getElementById('canvas')
if (canvas.getContext) {
alert(
"您的浏览器支持 canvas 标签");
}
else {
alert(
"您的浏览器不支持 canvas 标签");
}

/*
* canvas 标签 - 画布标签
* getContext("2d") - 获取画布标签上的 2D 上下文对象(CanvasRenderingContext2D 对象)
* width - 画布的宽
* height - 画布的高
* canvas.toDataURL(type) - 返回画布数据,默认类型为 image/png
* type - 指定返回画布数据的类型,比如可以指定为 image/jpeg,默认类型为 image/png
*
* CanvasRenderingContext2D - 画布的 2D 上下文对象,其拥有多种绘制图像的方法
* canvas - 上下文所对应的画布
*/

var ctx = canvas.getContext('2d');
alert(ctx.canvas.id);

function demo() {

ctx.fillRect(
20, 20, 100, 100);

alert(
"width: " canvas.width.toString());
alert(
"height: " canvas.height.toString());

alert(canvas.toDataURL(
"image/jpeg"));
alert(canvas.toDataURL());
// image/png
document.getElementById("img").src = canvas.toDataURL();

}

script>
body>
html>

你可能感兴趣的:(前端)