欢迎光临
我们一直在努力

Canvas概述和Hello World

1.1 概述

canvas

Canvas是HTML5中新增的一个元素,它就像一块画布,可以用JavaScript在上面绘制各种图表、动画、制作游戏等。

在没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和Flash进行交互。有了Canvas,我们就再也不需要Flash了,直接使用JavaScript完成绘制。

2.1 HelloWorld

<canvas>是一个标签,有一个默认的宽度,不需要了解。此时注意,如果我们要设置宽度、高度,必须设置在HTML标签上面,而不能设置在CSS上。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas画布 - HelloWorld</title>
<style type="text/css">
    canvas {
        border: 1px solid gray;
    }
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="300"></canvas>
</body>
</html>

我们必须使用JavaScript来控制Canvas渲染各种东西:

<script>
    // 使用DOM方法得到画布
    var myCanvas = document.getElementById("myCanvas");
    // 使用画布的上下文
    var ctx = myCanvas.getContext("2d");
    // 画各种东西,用ctx打点调用方法,而不是myCanvas
    ctx.fillRect(50, 50, 300, 50);
</script>

设置后的效果如下图:

Canvas画布 - HelloWorld

上面的例子中,我们就学习了两个API:

myCanvas.getContext("2d");

get表示得到,context是上下文的意思。

canvas起初是空白的。为了展示,首先脚本需要找到渲染上下文,然后在它的上面绘制。<canvas>元素有一个做getContext()的方法,这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数,上下文的格式。

ctx.fillRect(x,y,w,h)

fill是填充的意思,rect是rectangle矩形。填充一个矩形。

注意事项:

(1)、canvas的ctx对象,非常重要所有的绘制都是ctx的方法。

<script>
    // 使用DOM方法得到画布
    var myCanvas = document.getElementById("myCanvas");
    //使用画布的上下文
    var ctx = myCanvas.getContext("2d");
    // 画各种东西,用ctx打点调用方法,而不是myCanvas
    ctx.fillRect(50, 50, 300, 50);

    // canvas所有的绘制API都是基于ctx的事情,而不是canvas对象
    ctx.fillStyle = "lightgreen";
    ctx.beginPath();
    ctx.arc(250, 250, 100, 0, Math.PI * 2, true);
    ctx.fill();
    ctx.closePath();
</script>

(2)、canvas的坐标系

canvas的坐标系

(3)、canvas兼容到IE9

赞(4) 打赏
未经允许不得转载:前端学习分享网 » Canvas概述和Hello World

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏