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. Xcode7 低版本iOS系统上下有黑边的问题

    在使用Xcode7开发时,默认的启动页改成了 Launch Screen storyboard.通常情况下还是习惯使用 LaunchImage,介绍下Xcode7 下如何改为启动页是LaunchIma ...

  2. IOS开发之带格式的文本

    有时可能会遇到这样的问题,一个label中设置的文本含有2种以上不同的格式,又不能把它拆解为两个label来显示,这时用NSMutableAttributedString可以很好的解决问题. 示例如下 ...

  3. Rational Rose 2007 &amp;Rational Rose 2003 下载及破解方法和汉化文件下载

    这么好的东西,不拿来出分享,我对不起原作者呀.可是我这里不知道作者是谁,感谢在先了. ed2k://|file|%5BIBM%E8%BD%AF%E4%BB%B6%E7%B3%BB%E5%88%97%5 ...

  4. Java SE学习之printf 日期转换符

    本文是学习网络上的文章时的总结,感谢大家无私的分享. System.out.printf()方法能够对日期做处理输出. 相应列表 转换符 类型 举例 c 完整的日期和时间 Mon Feb 09 18: ...

  5. [React ] React Fundamentals: Component Lifecycle - Mounting Usage

    The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson ...

  6. JS中checkbox组件的使用

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. Android5.0之CardView的使用

    CardView也是一个非常炫酷的控件,一般我们将CardView配合RecyclerView来使用,当然,CardView也可以配合ListView来使用,都是可以的.OK,我们先来看一张CardV ...

  8. Java实现堆排序

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

  9. arcgis通过 Python 使用工具 获得结果信息

    通过 Python 使用工具 ArcGIS 10 每个地理处理工具都具有一组固定的参数,这些参数为工具提供执行所需的信息.工具通常具有定义一个或多个数据集的输入参数,这些数据集一般用于生成新的输出数据 ...

  10. redis resque消息队列

    Resque 目前正在学习使用resque .resque-scheduler来发布异步任务和定时任务,为了方便以后查阅,所以记录一下. resque和resque-scheduler其优点在于功能比 ...