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. 如何停止IIS

    当一台计算机同时安装了IIS服务器和apache服务器的时候,需要运行其中的一个服务器就需要将另一个服务器停止,那么如何停止IIS服务器: 双击[world wide web publishing s ...

  2. contentProvider模板

    package com.example.qunzheng.todolist.provider; import android.content.ContentProvider; import andro ...

  3. mysql 5.6 oom 图

  4. CCLabelAtlas创建自定义字体

    有时候游戏中要用到一些特殊的字体效果,特别是数字. CCLabelAtlas就可以从png图中读取文字. CCLabelAtlas* diceCount=CCLabelAtlas::labelWith ...

  5. 第一个html程序

    <html><head><title> 表单</title> </head><body><form action=&quo ...

  6. 【转】BeagleBone Black USB一线通（3）

    接上篇  BeagleBone Black 一线通(2) 五.vnc图形终端 虽然 BB-Black带有一个Micro-HDMI接口,不过那么名片不到的一个小板,连接到一个20来寸的显示器上,还是有些 ...

  7. 关于Xcode7中的tbd文件

    tbd 是 text-based stub libraries的意思, 是苹果在Xcode7中使用的一个技术,便于减少Xcode7中SDK的体积. 下面讲解下Xcode7如何通过tbd这个技术减少SD ...

  8. 用USB安装Linux系统(centos7)

    网上关于CentOS 7 的安装教程挺多的,但在前期的引导配置上很多都没有写清楚,让人很郁闷,以致于昨天安装的时候总是到不了安装界面.经过一番胡乱倒腾,终于找到了妥妥的解决方案(鸟哥的书功不可没啊^_ ...

  9. 用ModelSim仿真SDRAM操作

    之前写了两篇关于Modelsim仿真的blog,其中模块管脚的命名可能让人觉得有些奇怪,其实不然,之前的两篇内容都是为了仿真SDRAM操作做铺垫的. 由于SDRAM的仿真过程相对比较复杂,也比较繁琐. ...

  10. 第十一篇：web之Django之Form组件

    Django之Form组件   Django之Form组件 本节内容 基本使用 form中字段和插件 自定义验证规则 动态加载数据到form中 1. 基本使用 django中的Form组件有以下几个功 ...