Canvas

HTML5新增了一个canvas元素，它是一张空画布，开发者需要通过JavaScript脚本进行绘制。

在canvas上绘图，经过如下3步

（1） 获取canvas元素对应的DOM对象。

（2）调用canvas对象的getContext（）方法，该方法返回CanvasRenderingContext2D对象，该对象即可绘制图形。

（3）调用CanvasRenderingContext2D对象的方法绘图。

<head>

<meta charset="UTF-8">
<title></title>
<style type="text/css">

.paint-intro{
width: 300px;
height: 180px;
border: 1px solid #000;
}

</style>
<script type="text/javascript">

window.onload=function(){

var canvas = document.getElementById("paint");
var ctx=canvas.getContext('2d');
//设置填充颜色
ctx.fillStyle='#f00';
//绘制矩形
ctx.fillRect(30,40,80,100);

}

</script>

</head>

<body>

<h2>画图入门</h2>
<canvas id="paint" class="paint-intro"></canvas>

</body>

学习canvas的重点是CanvasRenderingContext2D对象。

Canvas对象的getContext（string context）方法将返回一个绘图API。目前该方法只支持‘2d’字符串为参数，该方法返回一个CanvasRenderingContext2D对象。

绘制几何图形

　　1.fillRect(),填充一个矩形区域

　　2.strokeRect()，绘制一个矩形区域

<canvas id="paintRectangle" class="paint-rectangle"></canvas>
<script type="text/javascript">

var canvas=document.getElementById("paintRectangle");
var ctx=canvas.getContext('2d');
ctx.fillStyle='#f00';
//填充一个矩形
ctx.fillRect(30,20,120,30);
//设置填充颜色
ctx.fillStyle='#ff0';
ctx.fillRect(60,40,120,30);
//设置线条颜色
ctx.strokeStyle='#0000ff';
//设置线条宽度
ctx.lineWidth=10;
//设置一个矩形边框
ctx.strokeRect(30,80,120,40);
//设置线条颜色
ctx.strokeStyle='#0ff';
//设置线条宽度
ctx.lineJoin="round";
//绘制一个矩形边框
ctx.strokeRect(80,100,120,40);
//设置线条颜色
ctx.strokeStyle='#f0f';
//设置线条宽度
ctx.lineJoin='bevel';
//绘制一个矩形边框
ctx.strokeRect(130,110,120,30);

</script>

绘制文字

　　1.fillText(),填充字符串

　　2.strokeText()，绘制字符串边框

<canvas id="paintText" width="600" height="280" style="border: 1px solid #000;"></canvas>
<script type="text/javascript">

var canvas=document.getElementById("paintText");
var ctx=canvas.getContext('2d');
ctx.fillStyle='#00f';
ctx.font='italic 50px 隶书';
ctx.textBaseline='top';
//填充字符串
ctx.fillText('填充字符串',0,0);
ctx.strokeStyle='#f0fs';
ctx.font='bolf 50px 宋体';
//填充字符串
ctx.strokeText('填充字符串',0,50);

</script>

设置阴影

　　shadowBlur：设置阴影的模糊度

　　shadowColor：设置阴影的颜色

　　shadowOffsetX： 设置阴影的X方向偏移量

　　shadowOffsetY： 设置阴影的Y方向偏移量

<canvas id="paintText" width="600" height="280" style="border: 1px solid #000;"></canvas>
<script type="text/javascript">

var canvas=document.getElementById("paintText");
var ctx=canvas.getContext('2d');
ctx.shadowBlur=5.6;
ctx.shadowColor='#222';
ctx.shadowOffsetX=10;
ctx.shadowOffsetY=-6;
ctx.fillStyle='#00f';
ctx.font='italic 50px 隶书';
ctx.textBaseline='top';
//填充字符串
ctx.fillText('填充字符串',0,0);
ctx.strokeStyle='#f0fs';
ctx.font='bolf 50px 宋体';
//填充字符串
ctx.strokeText('填充字符串',0,50);

</script>

使用路径

<canvas id="paintArc" width="400" height="280" style="border: 1px solid #000;"></canvas>
<script type="text/javascript">

var canvas=document.getElementById("paintArc");
var ctx=canvas.getContext('2d');
for(var i=0;i<10;i++){
ctx.beginPath();
ctx.arc(i*25,i*25,(i+1)*8,0,Math.PI*2,true);
ctx.closePath();
ctx.fillStyle='rgba(255,0,255,'+(10-i)*0.1+')';
ctx.fill();
}

</script>

本文参考《疯狂HTML5/CSS3/JavaScript讲义》

HTML5 的绘图支持- canvas的更多相关文章

  1. HTML5自学笔记[ 11 ]canvas绘图基础1

    html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支 ...

  2. HTML5自学笔记[ 15 ]canvas绘图实例之钟表

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. HTML5自学笔记[ 13 ]canvas绘图小实例之方块移动

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. HTML5自学笔记[ 12 ]canvas绘图小示例之鼠标画线

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 使ie9以下版本支持canvas,css3等主流html5技术的方法

    1.前言.   ie6,7,8支持html5,看起来比较难,其实有一种方法很通用,就是引入js和css,这种可插拔的引入对开发很有帮助.比如,下面是一个让网页支持canvas和css3的例子. 2.例 ...

  6. HTML5系列五（Canvas详述）

    写在前面 闲来无事的时候会来一场一个人说走就走的旅行或者宅家里系统性的看些技术方面的书,最近在看<html5与css3权威指南>,这本书挺适合初学前端的人,虽然对于我来说只是温习相关的知识 ...

  7. HTML5新特性之Canvas+drag(拖拽图像实现图像反转)

    1.什么是canvas 在网页上使用canvas元素时,会创建一块矩形区域,默认矩形区域宽度300px,高度150px.. 页面中加入canvas元素后,可以通过javascript自由控制.可以在其 ...

  8. HTML5新增核心工具——canvas

    原文:HTML5新增核心工具--canvas Canvas元素称得上是HTML5的核心所在,它是一个依靠JavaScript绘制华丽图像的元素. Canvas由一个可绘制地区HTML代码中的属性定义决 ...

  9. html5 手写的canvas实现

    试用支持canvas的浏览器,无JS依赖,运用新的HTML5技术DrawBoard.renderDrawer('myHandWrite',{  penColor:'#FF0000',  penWidt ...

随机推荐

  1. Wbemtest查询

    运行wbemtest,打开后连接命名空间,默认为“root\cimv2”,可以连接到”IIS管理命名空间(此为Windows Server 2008 R2)“ 查看该命名空间下所有可用的类:单击“枚举 ...

  2. Hyper-V网络虚拟化--VM之间拷贝速度慢

    Hyper-V网络虚拟化后,两台VM使用的是同一个VM网卡,相同IP地址池,但是互相拷贝文件速度很慢,只有2M左右,拷贝同时ping延迟在2000ms,解决方法: 主机型号:HP ProLiant D ...

  3. 关于WinRT中c++和c#相互调用的问题

    先说结论(不见得是最终正确的结论,不过google了一晚上也没有查出个所以然来,即便有解决方法我也认为是微软傻x): 首先c#和c++理所应当的不应该在同一个工程中,而只能是同一个工程的两个项目.只能 ...

  4. jfinal-QuartzPlugin后台任务调度

    配置方法: 1. 在jfinal的Start.java中插件位置配置QuartzPlugin /** * 配置插件 */ public void configPlugin(Plugins me) { ...

  5. [ES6] 23. Rest Parameters & Spread Parameters

    Rest Parameters: In ES5, when you don't know how many paramters will be passed in, you can use argum ...

  6. 教你用笔记本破解无线路由器password

    近期非常多人问我怎么破解WiFipassword…看来大家都对免费的东西比較有兴趣.要么也可能是我太招摇了…囧… 好吧,我就写篇小小的教程,看完后,你应该可以破解大部分无线路由器password了,写 ...

  7. locale 详解

    locale 是国际化与本土化过程中的一个非常重要的概念,个人认为,对于中文用户来说,通常会涉及到的国际化或者本土化,大致包含三个方面: 看中文,写中文,与 window中文系统的兼容和通信.从实际经 ...

  8. mysql远程连接错误提醒：2013-Lost connection to MySQL server at ‘reading initial communication packet', system error: 0

    因为没有匹配/etc/hosts.allow. 解决方法: 1.在hosts.allow 文件中添加 mysqld:ALL [root@ucDB204 ~]# cat /etc/hosts.allow ...

  9. 使用ViewState[""]传递Hashtable的值

    //首先定义Hashtable myHach ＝ new Hashtable(); //添加键值到Hashtable中myHash.Add("ServiceType1", &quo ...

  10. UNIX线程之间的关系

    我们在一个线程中经常会创建另外的新线程,如果主线程退出,会不会影响它所创建的新线程呢?下面就来讨论一下. 1.  主线程等待新线程先结束退出,主线程后退出.正常执行. 示例代码: #include & ...