canvas基本用法

canvas是html5提供的一个展示绘图效果的标签，canvas原意 画布 ， 在 HTML 页面中用于展示绘图效果. 最早 canvas 是苹果提出的一个方案, 今天已经在大多数浏览器中实现.

基本语法

<canvas></canvas>

使用须知

  1. 使用canvas标签，可以在页面开辟一个区域，默认宽高为300和150.
  2. 不要使用css的方式设置宽高，应该使用HTML属性。（如果使用css设置宽高会使内容拉伸）
  3. 如果浏览器不支持canvas标签，那么就会将其解释为div标签，因此常常在 canvas 中嵌入文本, 以提示用户浏览器的能力.
  4. canvas的兼容性非常强，只要支持该标签的，基本功能都一样，因此不用考虑兼容问题。
  5. canvas本身不能绘图，是使用javascript来完成绘图，canvas 对象提供了各种绘图用的 api.

canvas使用领域

  1. 游戏
  2. 可视化数据(重点)
  3. banner 广告
  4. 多媒体
  5. 未来
    • 模拟仿真
    • 远程操作
    • 图形编辑

基本绘图方法

绘图步骤

  1. 获得 canvas 对象.
  2. 调用 getContext 方法, 提供字符串参数 '2d'.
  3. 该方法返回 CanvasRenderingContext2D 类型的对象. 该对象提供基本的绘图命令.
  4. 使用 CanvasRenderingContext2D 对象提供的方法进行绘图.
  5. 基本绘图命令
    • 设置开始绘图的位置: context.moveTo( x, y ).
    • 设置直线到的位置: context.lineTo( x, y ).
    • 描边绘制: context.stroke().
    • 填充绘制: context.fill().
    • 闭合路径: context.closePath().

绘制基本线

<body>
    <canvas id='cas'></canvas>
    <script>
        // 获取id 
        var cas =document.getElementById('cas');

        // 设置canvas的宽高,边框 
        cas.width = 500;
        cas.height = 500;
        cas.style.border = '1px solid red';
         // 获得 CanvasRenderingContext2D 对象
        var ctx =  cas.getContext( '2d' );

        // 开始绘制
        //1. 设置起点位置
        ctx.moveTo(0,0);
        //1. 设置直线到的位置
        ctx.lineTo(500,500);

        //2. 设置起点位置
        ctx.moveTo(500,0);
        //2. 设置直线到的位置
        ctx.lineTo(0,500);

        // 描边显示效果
        ctx.stroke();        
    </script>
</body>

运行显示的页面效果

 

posted @ 2017-09-18 00:19  曦阳~  阅读(126)  评论(0)    收藏  举报