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. python 语句，条件，循环

    #coding:utf-8__author__ = 'Administrator'#想要在同一行打印,print后面加','print 12,print 34'''从模块导入函数import some ...

  2. 数字信号处理与音频处理（使用Audition）

    前一阵子由于考博学习须要,看了<数字信号处理>,之前一直不清除这门课的理论在哪里应用比較广泛. 这次正巧用Audition处理了一段音频,猛然发现<数字信号处理>这门课还是很实 ...

  3. 【Servlet】Filter过滤器的编写和配置

    Servlet的Filter介绍 在Servlet作为过滤器使用时,它可以对客户的请求进行过滤处理,当它处理完成后,它会交给下一个过滤器处理,就这样,客户的请求在过滤链里一个个处理,直到请求发送到目标 ...

  4. 齐全的IP地址查询接口及调用方法(转)

    设计蜂巢IP地址查询接口:http://www.hujuntao.com/api/ip/ip.php 腾讯IP地址查询接口:http://fw.qq.com/ipaddress 新浪IP地址查询接口: ...

  5. eclipse 中修改 M2_REPO的值--转载

    从eclipse中增加了maven2的插件之后,maven默认的本地库的路径是${user}/.m2/repository/下,一般windows用户的操作系统都安装在C盘,所以这个目录 下的jar包 ...

  6. Java基础知识强化之IO流笔记49：IO流练习之 复制指定目录下指定后缀名的文件并修改名称的案例

    1. 复制指定目录下指定后缀名的文件并修改名称的案例     需求:复制指定目录下的指定文件,并修改后缀名.  • 指定的文件是:.java文件.     • 指定的后缀名是:.jad     • 指 ...

  7. Java实现堆排序

    import java.util.Scanner; /*堆是一种数据结构,类似于一棵完整的二叉树. * 思想:堆的根节点值最大(最小),将无序序列调整成一个堆,就能找出这个序列的最大值(最小值),将找 ...

  8. IOS设备上给body绑定click事件不生效及其解决办法

    事件背景: 最近在做一个移动端业务的时候碰到一个bug,在ios上对body绑定click事实现事件代理冒泡至某些元素上尽然不生效. 思考: 暂借助jquery展示下事件绑定代码,将所有标签含有dat ...

  9. mysql mac 上启动

    launchctl load -w ~/Library/LaunchAgents/homebrew.mxcl.mariadb.plist 中内容: <string>/usr/local/o ...

  10. Thumb

    这个控件,真不好介绍,MSDN上也是草草几句,反正就是可以让用户拖动的玩意儿,但是,你会发现,当你在该控件上拖动时,它没有反响,也就是说这个东西默认不做任何操作的,它是赖在那里什么都不干,除非你去踢上 ...