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. 百度的TSDB——可针对tag查询，应该类似kairosDB

    天工架构 目前,天工平台的服务主要由物接入.物解析.物管理.规则引擎和时序数据库组成,并可无缝对接百度云天算智能大数据平台及基础平台产品,可提供千万级设备接入的能力,百万数据点每秒的读写性能,超高的压 ...

  2. 跑马灯效果的TextView之singLine 和maxLines

    Android 的TextView 里面有两个属性 singLine 和maxLines . 从字面意思来理解,这两个都是限制Text的行数.那么singleLine="true" ...

  3. iOS Xcode的快捷键

    将一些搜集和经常使用的快捷键记录下来,方便你我. Command +1~ 8: 跳转到导航区的不同位置 Command +0 :显示/隐藏导航区 Command Alt 1~ 6:在不同检测器之间跳转 ...

  4. cocos2d-x 2.0 拖尾效果分析

    转自:http://game.dapps.net/gamedev/game-engine/7281.html 在Cocos2d-x中,拖尾效果有一个专门的类CCMotionStreak来实现.下面我们 ...

  5. WINFORM跟随WPF窗体移动

    <Window x:Name="mainWindow1" x:Class="WpfApplication9.MainWindow"         xml ...

  6. zTree实现地市县三级级联DAO接口实现

    zTree实现地市县三级级联DAO接口实现 ProvinceDaoImpl.java: /** * @Title:ProvinceDaoImpl.java * @Package:com.gwtjs.d ...

  7. 表单中Readonly和Disabled的区别（转）

    今天做form提交的时候,用到了disabled,form提交的时候怎么获取都是null,后来用hidden解决了这个问题,但是考虑到为什么,最后找到了原因,转载一篇文章,说明一下 原文:http:/ ...

  8. PHP【第一篇】安装

    一.准备 1.环境 系统平台:Red Hat Enterprise Linux Server release 7.3 (Maipo) 内核版本:3.10.0-514.el7.x86_64 2.下载安装 ...

  9. last_9t's_ramsey

    cannot finish his face

  10. Socket.io各个发送消息的含义

    // send to current request socket client socket.emit('message', "this is a test"); // send ...