点击登录
  • 欢迎访问我的个人博客,在这里我会跟大家分享前端的学习心得, 一起成长  博客地址
  • 同时欢迎访问我正在实践的外贸电商网站 iMart
  • 目前正在求职前端工程师职位, 请查看我的在线简历

HTML5 Canvas & Svg

前端学习笔记 mike652638 626次浏览 已收录 2个评论
Canvas 是什么 ?

HTML5 <canvas> 标签定义图形(充当”图形容器”),结合脚本 (通常是JavaScript)来实现图形的绘制, 我们可以通过多种方法使用Canva绘制路径, 盒、圆、字符以及添加图像。

浏览器支持
元素 Chrome  IE  Firefox Safari Opera
<canvas> 4.0+ 9.0+ 2.0+ 3.1+ 9.0+

应用方式:

1. 创建一个画布
通过 <canvas >元素可以在网页中绘制一个矩形框,即画布, 例如:

显示如下:

您的浏览器不支持 HTML5 canvas 标签。

注: 空的Canvas元素默认情况下没有边框和内容, 上面示例为了给它存在感故定义了边框style=”border:1px solid #FF0000;”, 在canvas元素中插入注释”您的浏览器不支持 HTML5 canvas 标签。”当老版本的浏览器不能识别Canvas元素时才会显示出来。

2. 结合JavaScript来绘制图像
canvas 元素本身只是一个空的画布, 是没有绘图能力的, 所有的绘制工作必须结合 JavaScript 来完成, 例如:

显示如下:

您的浏览器不支持 HTML5 canvas 标签。

类似地, 还可以利用Canvas绘制路径:

显示如下:

您的浏览器不支持 HTML5 canvas 标签。

Canvas绘制圆形, 示例如下:

显示如下:

您的浏览器不支持 HTML5 canvas 标签。


本博部分文章转自前端大牛, 相关论坛或社区等, 凡转载文章均会注明原文地址, 如有侵权, 请与本人联系删除!
HTML5 Canvas & Svg
喜欢 (0)
[支付宝或微信扫码打赏 :)]
分享 (0)
mike652638
关于作者:
关注互联网, 折腾大前端 ~ 希望结交更多的前端好友, 大家一起交流哦
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 好文章,内容酣畅淋漓.禁止此消息:nolinkok@163.com
    玻璃钢冷却塔2017-07-10 16:44 Reply