一、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 ...

随机推荐

使用自定的Adapter绑定ListView/GridView数据
使用自定的Adapter绑定ListView/GridView数据(地址) 对于ListView/Gridview的数据绑定, google提供了一些Adapter的模板, 自己也可以自定义一些个性化 ...
【心得&amp&semi;&amp&semi;体会】
★2016.1.1★ 很早就想写这样的一篇blog了,但一直没有抽空去实现,新的一年感觉应该有所改变,故深夜提笔(码字) NOIP卡掉和连续两次月考爆炸,这段时间确实心理不舒服,调节的也不是很到位,但 ...
HDU 5151 Sit sit sit 区间DP + 排列组合
Sit sit sit 问题描述在一个XX大学中有NN张椅子排成一排,椅子上都没有人,每张椅子都有颜色,分别为蓝色或者红色. 接下来依次来了NN个学生,标号依次为1,2,3,...,N. 对于每个学 ...
HDU 5266 pog loves szh III (线段树+在线LCA转RMQ)
题目地址:HDU 5266 这题用转RMQ求LCA的方法来做的很easy,仅仅须要找到l-r区间内的dfs序最大的和最小的就能够.那么用线段树或者RMQ维护一下区间最值就能够了.然后就是找dfs序最大 ...
Linux常见面试题
一．填空题:1. 在Linux系统中,以文件方式访问设备 .2. Linux内核引导时,从文件 /etc/fstab 中读取要加载的文件系统.3. Linux文件系统中每个文件用索引节点来标 ...
Python 中的 if &lowbar;&lowbar;name&lowbar;&lowbar; == &&num;39&semi;&lowbar;&lowbar;main&lowbar;&lowbar;&&num;39&semi; 该如何理解
__name__ 表示当前模块名, __main__ 表示正在运行的模块名. if __name__ == '__main__' 这句话的意思就是,当模块被直接运行时,以下代码块将被运行,当模块是被导 ...
vue — 安装并创建vue项目
1.先从node.js官网(https://nodejs.org/en/download/) 下载并安装node,然后通过在命令行输入node -v命令,查看node的版本,要是出现相应的版本号就证明 ...
Python--Virtualenv简明教程
原文链接 http://www.jianshu.com/p/08c657bd34f1 virtualenv通过创建独立Python开发环境的工具, 来解决依赖.版本以及间接权限问题. 比如一个项目依赖 ...
tkinter简单打开网址 + 执行系统命令
from tkinter import * import webbrowser root = Tk() text = Text(root,width=30,height = 5) text.pack( ...
卢卡斯定理 Lucas （p为素数）
证明摘自:(我网上唯一看得懂的证明) https://blog.csdn.net/alan_cty/article/details/54318369 结论:(显然递归实现)lucas(n,m)=luc ...

HTML5画布Canvas