• 技术文章 >web前端 >前端问答

    html5 canvas是什么

    青灯夜游青灯夜游2021-11-18 15:34:27原创76

    canvas是HTML5提供的一个用于展示绘图效果的标签,“<canvas>”标签提供了一个空白的图形区域(矩形区域的画布),需要使用特定的JavaScript API来绘画图形。

    本教程操作环境:windows7系统、HTML5版、Dell G3电脑。

    1、什么是Canvas

    canvas 是 HTML5 提供的一个用于展示绘图效果的标签

    canvas 提供了一个空白的图形区域,可以使用特定的JavaScript API来绘画图形(canvas 2D或WebGL)
    首先由 Apple 引入的,用于OS X的仪表盘 和 Safari 浏览器

    1.1 关于Canvas的一些说明

    canvas 是一个矩形区域的画布,可以用JavaScript在上面绘画。控制其每一个像素。

    canvas 标签使用 JavaScript 在网页上绘制图像,本身不具备绘图功能。

    canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

    1.2 canvas主要应用的领域(了解)

    1)、游戏:canvas在基于Web的图像显示方面比Flash更加立体、更加精巧,canvas游戏在流畅度和跨平台方面更牛。

    2)、可视化数据(数据图表话),比如: 百度的echart、d3.js、three.js

    3)、banner广告:Flash曾经辉煌的时代,智能手机还未曾出现。现在以及未来的智能机时代,HTML5技术能够在banner广告上发挥巨大作用,用Canvas实现动态的广告效果再合适不过。

    4)、未来

    模拟器:无论从视觉效果还是核心功能方面来说,模拟器产品可以完全由JavaScript来实现。

    远程计算机控制:Canvas可以让开发者更好地实现基于Web的数据传输,构建一个完美的可视化控制界面。

    图形编辑器:Photoshop图形编辑器将能够100%基于Web实现。

    2、Canvas标签介绍

    <canvas width="600" height="400"></canvas>

    作用:展示绘图的内容,但不能进行绘图

    2.1 canvas的兼容性

    <canvas width="600" height="400">
        IE9及其以上版本的浏览器,才支持canvas标签
        提示:您的浏览器不支持canvas,请升级浏览器
    </canvas>

    2.2 设置宽高注意点

    1)、可以使用 html属性/DOM属性 width 和 height来设置

    2)、不要:使用CSS样式来设置宽高

    使用 属性设置宽高,实际上相当于增加了 canvas画布的像素

    默认宽高: 300*150,表示:水平方向有300个像素,垂直方向有150个像素

    使用属性设置宽高,是增加或减少了canvas画布的像素;

    而使用css样式,不会增加像素点,只是将每个像素点扩大了!

    2.3 绘图

    使用JavaScript中提供的绘图API来绘制

    每个canvas都有一套绘图的API(工具)

    2.3.1 绘图的基本步骤

    1)、找到canvas画布

    2)、通过canvas拿到绘图上下文(一系列的API集合)

    3)、使用API绘制需要的图形

    // 1)、找到canvas
     var cv = document.getElementById("canvasId");
     
    // 2)、拿到canvas绘图上下文
     var ctx = cv.getContext("2d");
     
    // 3)、使用上下文中的API绘制图形
     ctx.moveTo(100, 100);   // 将画笔移动到 100,100 的位置
     ctx.lineTo(200, 100);   // 从 100,100 到 200,100 画一条线段
     ctx.stroke();           // 描边

    推荐教程:《html视频教程

    以上就是html5 canvas是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:HTML5 canvas
    上一篇:html dom是什么意思 下一篇:html属于java吗
    php中文网线上培训班

    相关文章推荐

    • 微信小程序-canvas生成图片并保存到本地• 使用canvas轻松实现黑客帝国炫酷代码雨!!• HTML5利用canvas绘制哆啦A梦头部(代码实例)• HTML5 canvas如何绘制酷炫能量线条效果(附代码)

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网