一、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. Servlet和JAVA BEAN 分析探讨

    在JSP中调用JAVA类和使用JavaBean有什么区别? 可以像使用一般的类一样使用JavaBean,Bean只是一种特殊的类.特殊在可以通过<jsp:useBean   />调用Jav ...

  2. Android基础_1 四大基本组件介绍与生命周期

    Android四大基本组件分别是Activity,Service(服务),Content Provider(内容提供者),BroadcastReceiver(广播接收器). 一.四大基本组件 Acti ...

  3. mac里vmware fusion桥接设置

    1 桥接模式网络连接:选择以太网 2 在虚拟机操作系统里设置好ip,手动设置,将虚拟机当成一台存在的物理机设置 3 在宿主MAC偏好设置-网络-以太网-高级-硬件, 配置:自动改为 手工, 速度:选择 ...

  4. Discuz!NT静态文件缓存(SQUID)

    在目前最新版本的产品中,我们提供了缓存静态文件的解决方案,就是使用SQUID做静态前端,将论坛中的大部分静态文件布署或外链到一个新的HTTP链接上,其中可以外链的静态文件包括:      1.Disc ...

  5. hdu 2825(ac自动机+状态压缩dp)

    题意:容易理解... 分析:在做这道题之前我做了hdu 4057,都是同一种类型的题,因为题中给的模式串的个数最多只能为10个,所以我们就很容易想到用状态压缩来做,但是开始的时候我的代码超时了dp时我 ...

  6. [Everyday Mathematics]20150210

    设正方体 $ABCD-A_1B_1C_1D_1$ 的棱长为 $1$, $E$ 为 $AB$ 的中点, $P$ 为体对角线 $BD_1$ 上一点, 当 $\angle CPE$ 最大时, 求三菱锥 $P ...

  7. Twenty Questions

    题意: 有n个长度为m的二进制串,每个都是不同的. 为了把所有字符串区分开,你可以询问,每次可以问某位上是0还是1. 问最少提问次数,可以把所有字符串区分开来. 分析: dp[s1][s2]: 表示提 ...

  8. Hie with the Pie（POJ 3311状压dp）

    题意:披萨店给n个地方送披萨,已知各地方(包括披萨店)之间花费的时间,求送完所有地方并回到店花费的最小时间 分析:状态好确定dp[i][j],i中1表示地方已送过,否则为0,j为当前状态最后一个送过的 ...

  9. Jmeter教程

    博客园 http://www.cnblogs.com/yangxia-test/category/431240.html 1)分析能力没有LoadRunner详细 2)jmeter不支持IP欺骗,而L ...

  10. SVM：从理论到OpenCV实践

    (转载请注明出处:http://blog.csdn.net/zhazhiqiang/ 未经允许请勿用于商业用途)   一.理论 参考网友的博客: (1)[理论]支持向量机1: Maximum Marg ...