一、Canvas概念介绍

1、概念 Canvas ：画布

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

二、画图步骤

1、创建一个画布

注意：<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的更多相关文章

HTML5画布(CANVAS)速查简表
HTML5画布(CANVAS)速查简表 http://www.webhek.com/misc/html5-canvas-cheat-sheet/
HTML5 画布canvas元素
HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...
关于HTML5画布canvas的功能
一.画布的使用 1.首先创建一个画布(canvas) <canvas id=”myCanvas” width=”200” height=”100” style=”border:1px solid ...
10款面向HTML5 画布(Canvas)的JavaScript库
https://www-evget-com/article/2014/4/9/20799.html
HTML5 画布canvas
SVG的<defs> <symbols> 元素用于预定义一个元素使其能够在SVG图像中重复使用 <svg xmlns="http://www.w3.org/20 ...
转载：将画布(canvas)图像保存成本地图片的方法
之前我曾介绍过如何将HTML5画布(canvas)内容转变成图片形式,方法十分简单.但后来我发现只将canvas内容转变成图片输出还不够,如何能将转变后的图片保存到本地呢? 其实,这个方法也是非常简单 ...
面向画布(Canvas)的JavaScript库
面向画布(Canvas)的JavaScript库总结每个库各有特色,根据需求选择学习要点面向画布(Canvas)的JavaScript库 EaselJS 是一个封装了 HTML5 画布(C ...
浅尝HTML5之canvas
转自:http://segmentfault.com/a/1190000000661407/ HTML5新标签 HTML5新引入header,footer,article,section,aside和 ...
用html5的canvas画布绘制贝塞尔曲线
查看效果:http://keleyi.com/keleyi/phtml/html5/7.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

随机推荐

TCP/IP详解学习笔记(8)-DNS域名系统
前面已经提到了访问一台机器要靠IP地址和MAC地址,其中,MAC地址可以通过ARP协议得到,所以这对用户是透明的,但是IP地址就不行,无论如何用户都需要用一个指定的IP来访问一台计算机,而IP地址又非 ...
Oracle的OracleBulkCopy不支持事务处理
在进行OracleBulkCopy批量数据导入的过程中使用事务后抛出了异常, 没使用事务时可以正确批量导入, ORA-12154:无法解析指定的连接字符串, 但是TNS配置肯定是没有错的, 难道是Co ...
oracle 统计语句与常见函数的归纳（未完待续）
一.统计语句 1. count count(*)与count(0)语句的区别: count(*)统计所有数量 count(0)统计第一列不为空的 2. 两个统计量的减法 select (select ...
util-判断当前年份所处的季度，并返回当前季度开始的月份
ylbtech-funcation-util: 判断当前年份所处的季度,并返回当前季度开始的月份判断当前年份所处的季度,并返回当前季度开始的月份. 1.A,Ylbtech.Model返回顶部 us ...
HDU 5768 Lucky7 容斥原理+中国剩余定理（互质）
分析: 因为满足任意一组pi和ai,即可使一个“幸运数”被“污染”,我们可以想到通过容斥来处理这个问题.当我们选定了一系列pi和ai后,题意转化为求[x,y]中被7整除余0,且被这一系列pi除余ai的 ...
【转】发布python的包至pypi服务器
[原文链接]http://yejinxin.github.io/distribute-python-packages-to-pypi-server/ 使用pip或easy_install可以管理和安装 ...
遍历集合 Dictionary 的时候修改集合方法
Dictionary<string, string> dic = new Dictionary<string, string>(); dic.Add("1" ...
Leave Morningstar
Today, closed 4++ years developer life (2009.11.17-2014.02.28) in MorningStar Shenzhen Office Austra ...
bzoj 2186 [Sdoi2008]沙拉公主的困惑（欧拉函数，逆元）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2186 [题意] 若干个询问,求1..n!中与m!互质的个数. [思路] 首先有gcd( ...
欧拉图 CCF2016第六次送货
// 欧拉图 CCF2016第六次送货 // 思路: // CCF数据很水....这道题有问题 // 先判连通,再dfs边. // 应为输出要满足字典序最小,用vector存图,sort一遍,用st ...

HTML5画布Canvas