一、Canvas概念介绍

1、概念 Canvas ： 画布

2、作用 ： HTML5 Canvas 元素用于图形的绘制, 通过脚本(通常是JavaScript)来完成。它本身只是个图形容器,必须使用脚本来绘制图像

二、画图步骤

1、创建一个画布

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

注意：<canvas>元素没有边框和内容, 使用 style 属性来添加边框

2、使用JavaScript来绘制图像

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>菜鸟教程(runoob.com)</title> 

</head>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

HTML5 canvas 标签。</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx.fillText("Hello World",10,50);

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,20,25);

</script>

</body>

</html>

JavaScript画图代码步骤 ：

①、首先, 找到canvas元素

var c=document.getElementById("myCanvas");

②、创建Context对象

var ctx=c.getContext("2d");

getContext("2d") 对象是内建的HTML5对象, 拥有多种绘制路径、矩形、图形、字符及添加图像的方法

③、业务代码

三、Canvas用法

1、介绍Canvas常用属性

①、fillStyle属性 ： 可以是CSS颜色、渐变、图案等

②、font ： 定义字体

2、介绍Canvas常用方法

①、fillRect（x, y, width, height）: 定义矩形的填充方式

②、fillText（text, x, y）： 在canvas绘制文本

③、drawImage（image, x, y）: 图像画到画布上

四、参考文献

1、http://www.runoob.com/html/html5-canvas.html

2、http://www.runoob.com/tags/ref-canvas.html

HTML5画布Canvas的更多相关文章

  1. HTML5画布(CANVAS)速查简表

    HTML5画布(CANVAS)速查简表 http://www.webhek.com/misc/html5-canvas-cheat-sheet/

  2. HTML5 画布canvas元素

    HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...

  3. 关于HTML5画布canvas的功能

    一.画布的使用 1.首先创建一个画布(canvas) <canvas id=”myCanvas” width=”200” height=”100” style=”border:1px solid ...

  4. 10款面向HTML5 画布(Canvas)的JavaScript库

    https://www-evget-com/article/2014/4/9/20799.html

  5. HTML5 画布canvas

    SVG的<defs> <symbols> 元素用于预定义一个元素使其能够在SVG图像中重复使用 <svg xmlns="http://www.w3.org/20 ...

  6. 转载：将画布(canvas)图像保存成本地图片的方法

    之前我曾介绍过如何将HTML5画布(canvas)内容转变成图片形式,方法十分简单.但后来我发现只将canvas内容转变成图片输出还不够,如何能将转变后的图片保存到本地呢? 其实,这个方法也是非常简单 ...

  7. 面向画布(Canvas)的JavaScript库

    面向画布(Canvas)的JavaScript库 总结 每个库各有特色,根据需求选择   学习要点 面向画布(Canvas)的JavaScript库 EaselJS 是一个封装了 HTML5 画布(C ...

  8. 浅尝HTML5之canvas

    转自:http://segmentfault.com/a/1190000000661407/ HTML5新标签 HTML5新引入header,footer,article,section,aside和 ...

  9. 用html5的canvas画布绘制贝塞尔曲线

    查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

随机推荐

  1. C# 编写的串口通信程序

    如果,翻看我之前的博客,会找到一篇用I/O模拟IIC通信的程序文章.好吧,如果找不到可以点击这里,这里就不在赘述了,系统也已经完全调试通过了. 今天的任务是,把测试得到的数据在上位机的界面上显示出来, ...

  2. [cocos2d-x·解Bug]关于cocos2d-x游戏在android锁屏状态下播放Bgm的解决方法

    最近<宠物联萌>在三星App上发布遇到一个问题:如果用户在锁定屏幕时解锁解到一半时取消解锁,这时用cocos2d-x开发的游戏就会出现游戏Bgm会恢复播放,但手机屏幕仍然是锁屏状态的Bug ...

  3. error C2471: 无法更新程序数据库 vc90.pdb

    error C2471: 无法更新程序数据库“d:/Work/ Project/debug/vc90.pdb” fatal error C1083: 无法打开程序数据库文件:“d:/Work/ Pro ...

  4. mysql的MMM高可用方案

    1    MMM高可用mysql方案 1.1  方案简介 MMM即Master-Master Replication Manager for MySQL(mysql主主复制管理器)关于mysql主主复 ...

  5. iOS-利用AFNetworking（AFN 1.x)-实现文件断点下载

    转:http://www.kaifazhe.com/ios_school/380066.html 官方建议AFN的使用方法 1. 定义一个全局的AFHttpClient:包含有 1> baseU ...

  6. UI篇--android实现底部按钮布局

    1.采用LinearLayout布局: <LinearLayout android:id="@+id/main" android:layout_width="fil ...

  7. ASP.NET 日期 时间 年 月 日 时 分 秒 格式及转换

    在平时编码中,经常要把日期转换成各种各样的形式输出或保持,今天专门做了个测试,发现DateTime的ToString()方法居然有这么多的表现形式,和大家一起分享. DateTime time=Dat ...

  8. 学习笔记——XSLT转换器的使用（Xalan和Saxon） .（转）

    转自:http://blog.csdn.net/crystalbruce/article/details/7401602 XSLT分为两类: 1:客户端转换:需要浏览器的支持. 2:服务器转换:需要使 ...

  9. HTML5的manifest缓存

    要使用manifest缓存,我们首先需要写一个manifest文件.这个文件有严格的格式要求,下面是个例子CACHE MANIFEST#我是注释,这个文件名叫test.manifestCACHE:/t ...

  10. SSHFS

    SSHFS(SSH文件系统) 是一个文件系统客户端程序,使用它可以将远程服务器上的目录挂载在本地直接访问 可以在网站http://igikorn.com/sshfs-windows-8/内下载