HTML5画布Canvas
一、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的更多相关文章
- 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 ...
随机推荐
- LeetCode Factorial Trailing Zeroes (阶乘后缀零)
题意:如标题 思路:其他文章已经写过,参考其他. class Solution { public: int trailingZeroes(int n) { <? n/: n/+trailingZ ...
- 使用D3D渲染YUV视频数据
源代码下载 在PC机上,对于YUV格式的视频如YV12,YUY2等的显示方法,一般是采用DIRECTDRAW,使用显卡的OVERLAY表面显示.OVERLAY技术主要是为了解决在PC上播放VCD而在显 ...
- ejabberd、jabber、jabberd、xmpp辨析
Jabber 是著名的即时通讯服务服务器,它是一个自由开源软件,能让用户自己架即时通讯服务器,可以在Internet上应用,也可以在局域网中应用. XMPP(可扩展消息处理现场协议)是基于可扩展 ...
- c# 利用反射动态给实体类对象赋值
转:http://blog.sina.com.cn/s/blog_659a572b0100xp5s.html 例子如下 using System; using System.Collections.G ...
- mysql 外连接总结
内连接: 只连接匹配的行左外连接: 包含左边表的全部行(不管右边的表中是否存在与它们匹配的行),以及右边表中全部匹配的行右外连接: 包含右边表的全部行(不管左边的表中是否存在与它们匹配的行),以及左边 ...
- cgroup的测试数据
[root@xxxx /cgroup/memory/rule3021]#cat memory.limit_in_bytes503316480 480M [root@xxxx /cgroup/mem ...
- Linux Kernel 4.8分支第4个候选版本发布
导读 今天,大神Linus Torvalds宣布了Linux 4.8分支的第四个候选版本,该候选版本在提供常规驱动更新.架构改善和部分KVM调整之外最大的新功能就是修复了英特尔Skylake电源管理B ...
- Redis,Memcache,mongoDB的区别
从以下几个维度,对redis.memcache.mongoDB 做了对比,欢迎拍砖 1.性能 都比较高,性能对我们来说应该都不是瓶颈 总体来讲,TPS方面redis和memcache差不多,要大于mo ...
- Metaspace 之二--Java 8的元空间(metaspace)、metaspace监控方法
很多开发者都在其系统中见过“java.lang.OutOfMemoryError: PermGen space”这一问题.这往往是由类加载器相关的内存泄漏以及新类加载器的创建导致的,通常出现于代码热部 ...
- Fixing the Great Wall
题意: 在一条线上,有n个坏的地方要修机器人修,机器人的移动速度V,若坏的地方立即被修花费ci,若没修,每单位时间增加d,出去机器人的开始位置,求修完n个地方的最小花费. 分析: 非常经典,求解“未来 ...