canvas简单介绍

原创 395721938 随笔 笔记 205阅读 2017-12-20 14:51:04 举报

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>

cas{

        border: 1px solid #ccc;
    }
</style>
<script>
    //canvas:     帆布  画布

    //canvas是html5中新增的一个标签

    //canvas的特点:

    //1. 尺寸
    //canvas的默认宽高为300 * 150
    //canvas设置宽高可以通过标签的属性width和height来设置(通常的做法)
    //也可以通过css样式来设置,但是通过css样式设置会将画布拉伸

    //2. 页面中可以有多个canvas标签

    //3. canvas标签只是一个用来展示绘图效果的标签,具体的绘图工作,还是要通过js代码来实现

    //4. 绘图要通过绘图工具(绘图上下文),这个绘图工具要通过canvas对象来获取
        //canvas对象.getContext(type);
            //type是一个字符串,表示要获取的绘图工具的类型
                //"2d":  获取2d绘图工具
                //"webgl" 获取3d绘图工具   three.js

    //5. 每一个canvas标签都拥有自己的画图工具,不同的canvas绘图要通过该canvas自己的绘图工具!

    //6. canvas 有兼容性问题,canvas标签中写的内容,在支持canvas的浏览器当中不会显示,但是在不支持canvas标签的浏览器中,canvas标签会被当做div来处理,所以里面的内容,就会显示出来了(一般情况下,我们会在canvas标签中写一些提示信息)

    //7. canvas 的API的兼容性非常好, 在所有支持canvas标签的浏览器当中,canvas的体现都是完全一致的,所以代码基本上是通用的!

    //canvas的使用步骤
    //1. 在页面上写一个canvas标签
    //2. 获取canvas对象
    //3. 通过canvas对象获取绘图工具
    //4. 通过绘图工具.moveTo()告诉绘图工具起始位置
    //5. 通过绘图工具.lineTo()告诉绘图工具结束位置
    //6. 通过绘图工具.stroke()通知绘图工具画线!
</script>

</head>
<body>
<canvas width="600" height="400" id="cas">你猜你能不能看见我!</canvas>

<script>
    //1. 获取了canvas对象
    var cas = document.querySelector("#cas");

    //2. 获取绘图工具
    var ctx = cas.getContext("2d");

    //3. 告诉绘图工具在哪里落笔  绘图工具.moveTo(x, y)
    ctx.moveTo(100, 100);

    //4. 告诉绘图工具画到哪里去  绘图工具.lineTo(x, y)
    ctx.lineTo(500, 100);

    //5. 告诉绘图工具把线描出来  绘图工具.stroke();

    ctx.stroke();
</script>

</body>
</html>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复