【HTML5】Canvas画布
什么是 Canvas?
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
* 添加 canvas 元素。规定元素的 id、宽度和高度:
<canvas id="myCanvas" width="200" height="100"></canvas>
* canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:
<script type="text/javascript">
//使用 id 来寻找 canvas 元素:
var c=document.getElementById("myCanvas");
//创建 context 对象:是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
var cxt=c.getContext("2d");
//下面的两行代码绘制一个红色的矩形:fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);//意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。
</script>
** 画线条
效果图:
<!DOCTYPE HTML>
<html>
<body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke(); </script> </body>
</html>
** 画圆
<!DOCTYPE HTML>
<html>
<body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill(); </script> </body>
</html>
** 画渐变图形
<!DOCTYPE HTML>
<html>
<body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50); </script> </body>
</html>
** 把一幅图像放置到画布上
<!DOCTYPE HTML>
<html>
<body> <canvas id="myCanvas" width="230" height="180" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="/i/eg_flower.png"
cxt.drawImage(img,0,0); </script> </body>
</html>
【HTML5】Canvas画布的更多相关文章
- html5——canvas画布
一.基本介绍 1,canvas是画布,可以描画线条,图片等,现代的浏览器大部分都支持. canvas的width,height默认为300*150,要指定画布大小,不能用css样式的widh,heig ...
- html5 canvas画布上合成
source-over 默认.在目标图像上显示源图像. source-atop 在目标图像顶部显示源图像.源图像位于目标图像之外的部分是不可见的. source-in 在目标图像中显示源图像.只有目标 ...
- HTML5 Canvas 画布
一.Canvas是什么? canvas,是一个画布,canvas元素用于在网页上绘制图形. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 二.创建Canvas元素 加上基本的属 ...
- HTML5 canvas画布写炫彩动态的倒计时效果
html代码如下,插入了2个js代码. <!DOCTYPE html> <html> <head> <title>canvas</title> ...
- css总结19:HTML5 Canvas(画布)
1 <canvas> 标签定义图形,比如图表和其他图像. 例1:简单使用: <canvas id="Canva" width="200" h ...
- Particles.js基于Canvas画布创建粒子原子颗粒效果
文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...
- 16个富有创意的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- html5 canvas 画图移动端出现锯齿毛边的解决方法
使用HTML5的canvas元素画出来的.在移动端手机上测试都发现画图有一点锯齿问题 出现这个问题的原因应该是手机的宽是720像素的, 而这个canvas是按照小于720像素画出来的, 所以在720像 ...
- 16个非常有趣的HTML5 Canvas动画特效集合
HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...
- HTML5 中的 canvas 画布(一)
---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本 注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript ...
随机推荐
- WiFi入口流量O2O微应用平台
WiFi入口流量O2O微应用平台 随着智能手机一年比一年销量大好,传统的互联网的流量争夺战场已经转向了移动互联网,各大巨头纷纷出招,智能wifi路由器就是其中最重要的一块战略高地.所谓的智能路由器,解 ...
- 【福利将至】iPhone用户可用Siri发微信了
北京时间6月14日,苹果WWDC16开发者大会召开.继2015年3月份春季发布会和9月份的秋季新品发布会,苹果和腾讯联手Apple Watch版微信和微信3DTouch功能之后,双方在今年的WWDC上 ...
- 表单元素的写法及与后台php的交互
1.<select class="textEnaSty" name="Port" size="1" onchange="Ob ...
- shell截取字符串
image_tag="pangu-20151021102145\"" 1.用#号截取,符号-右面所有字符串 TMP=${image_tag#*-} echo $TMP 得 ...
- Ubuntu 16.04 下安装Firefox的Flash插件
在ubuntu系统环境下面打开优酷视频,发现无法播放视频.Adobe Flash Player 是一款轻量级浏览器插件,具有丰富的 Internet 应用运行时间,提供持续的迷人用户体验.绝妙的音频/ ...
- 添加删除一个controller
(文章是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) rails generate controller Users rails destroy cont ...
- [BZOJ1659][Usaco2006 Mar]Lights Out 关灯
[BZOJ1659][Usaco2006 Mar]Lights Out 关灯 试题描述 奶牛们喜欢在黑暗中睡觉.每天晚上,他们的牲口棚有L(3<=L<=50)盏灯,他们想让亮着的灯尽可能的 ...
- phpcms某处储存型XSS(demo+本地演示)
文章转载:http://www.myhack58.com/Article/html/3/7/2016/71726.htm 详细说明: demo+本地演示存在xss漏洞的地方在商务中心的商家资料的我的资 ...
- Bmob用户管理操作
注册用户 BmobUser bu = new BmobUser(); bu.setUsername("sendi"); bu.setPassword("123456&qu ...
- 【Hibernate】Hibernate系列5之检索策略
检索策略 5.1.类级别检索策略 5.2.set多对多.一对多检索策略 5.3.多对一.一对一检索策略 HQL作用: http://zhidao.baidu.com/link?url=dnAdJWR7 ...