HTML5 初识 - Canvas

呃。。

今天开始看一下HTML5的一些东西了。

准备工作:

1、一个支持HTML5的浏览器(我用的Opera11.52和IE9),当然,火狐的和Chrome的近几个版本都能很好地支持HTML5

2、一个HTML的手册(说明书),以方便查阅。

因为发现目前用得比较多的是canvas,所以直接看了传说中很牛x的canvas标签的大概使用!

1、HTML中的canvas标签用于画图。。。貌似有点废话,canvas不就是个画布么 。

2、canvas标签中画图是由js控制,其中包含HTML5新添加的几个js函数。

要画图,第一步是要取得画图的上下文环境——context,所以呢要用到这样一个函数

getContext(contextId)

在我目前所看到的资料中,contextId的值为 ‘2d‘,好像在哪里看到HTML5目前还不支持 ‘3d’,具体的也记不清楚了。

此函数返回一个canvas的context。

具体获取方法为:

var context = document.getElementById(‘canvasId‘).getContext(‘2d‘)

突然想到 ,canvas也和以前的html元素一样,可以使用css控制( 这是真正的废话啊)。

在获取到了context后,就可以开始画图了,是吧!

要开始画图,需要先调用一个函数 beginPath()

具体使用如下:

context.beginPath();

当然,有beginPath()就得有endPath()。。。。。不过这次错了,这次却是closePath(),我觉得可以理解成为闭合路径,也就是完成画图 作了。

context有几个设置属性

1、设置画图时线的粗细 lineWidth 使用方法为 context.lineWidth = 3; //3即为线的粗细的值,数值越大线越粗,默认值为1

2、设置画图时线的颜色 strokeStyle 使用方法为 context.strokeStyle = "rgb(255, 0, 0)";

3、设置填充颜色 fillStyle 使用方法为context.fillStyle = "red" ; 设置方法和上面那个一样的咯。。

正式开始画咯 

当然,我还只学了两种图形

1、矩形(Rectangle),画法:

context.rect(left, top, width, height) //这个画法好像不会去实现前面设置的属性,如颜色什么的

context.strokeRect(left, top, width, height) //这个画法会去实现前面设置的属性

2、圆(Circle)【说是圆。为啥我的画出来,是椭圆了?】,画法:

context.arc(120, 120,50,0,Math.PI, true); //120,120这两个值是设置圆心的位置的;50是半径;0是这里的参数是代表的什么属性还不清楚,没看文档,只知道当为0的时候只有半个圆,这应该是决定圆要画多少出来的吧^_^;Math.PI,这个都懂的;参数true表示画圆的上面的部分,false表示画圆的下面的部分,当然,这里的上面部分和下面部分是和前面的参数0有关的,随着0的变化,画出的结果也不一样的了。

画好了,然后是两个填充(可能有点不准确哈)函数:

1、context.stroke(); //这个函数在调用context.closePath()后执行(为什么要在后面执行?我也不知道,手册上那么写的,其它的情况还没有测试过) ,执行的结果是填充所画图形的边框(Border)

2、context.fill(); //这个函数。。。唉 ,不想重复打那些字,跳过好了。执行结果是填充(真正的是填充哦)所画图形的内部区域

当然了,要是想画个图形,又有边框又要填充效果,那么就调用context.stroke()和context.fill()两个函数了。

附上今天的代码:

<!doctype html>
<html>
<head>
<title>HTML5 Exercise Page</title>
<script type="text/javascript">
function getContext(id) {
return document.getElementById(id).getContext(‘2d‘);
}
function init() {
var ctx1 = getContext("cvs1");
var ctx2 = getContext("cvs2");
ctx1.beginPath();

ctx1.lineWidth = 3;
ctx1.strokeStyle = "#3333AA";
ctx1.strokeRect(100, 10, 200, 300);
ctx1.fill();
ctx1.closePath(0);
ctx2.beginPath();
// ctx2.lineWidth = 3;
// ctx2.strokeStyle = "rgb(87,65,144)";
ctx2.fillStyle="red";
ctx2.arc(120, 120,50,100,Math.PI, true); //参数true表示画上半部分,false表示画下半部分
// ctx2.arc(100, 100,50,0,Math.PI, false);
ctx2.closePath();
ctx2.stroke(); //这种填充方式只画边框
ctx2.fill(); //这种填充方式会填充内部区域为默认(指定颜色)
}
</script>
<style type="text/css">
canvas{
border:#660033 solid 2px;
width:400px;
height:400px;
}
</style>
</head>
<body onLoad="init();">
<canvas id="cvs1">Browser does not support HTML5 element canvas!</canvas>
<canvas id="cvs2">Browser does not support HTML5 element canvas!</canvas>
</body>
</html>

  

时间: 2024-10-16 06:16:14

HTML5 初识 - Canvas的相关文章

HTML5程序设计 Canvas API

检测浏览器支持情况 <script type="text/javascript"> try { document.createElement("Canvas").getContext("2d"); document.getElementById("support").innerHTML = "OK"; } catch (e) { document.getElementById("sup

HTML5 画布 Canvas

利用html5的canvas元素使用 JavaScript 在网页上绘制图像. 通过规定尺寸.颜色和位置,来绘制一个圆: <!DOCTYPE htma> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #3CF;"> Your browser does not

html5中用canvas画八大行星围绕太阳转

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8&

HTML5 画布canvas元素

HTML5 画布canvas元素 HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小看了这个画布,它能实现无限的可能性.接下来我们从最简单的部分开始,逐步认识Canvas的强大功能. 1.在页面中添加canvas元素: 默认情况下,Canvas所创建的矩形区域大小为宽300像素,高150像素,不过我们可以使用width和height属性来自定义画布

HTML5在canvas中绘制复杂形状附效果截图

HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路径. closePath() : 通过绘制一条当前点到路径起点的线段来闭合形状. fill() , stroke() : 填充形状或绘制空心形状. moveTo() : 将当前点移动到点(x,y). lineTo() : 从当前点绘制一条直线到点(x,y). arc(x,y,r,sAngle,eAn

HTML5之Canvas画正方形

1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>HTML5之Canvas画正方形</title> <script type="text/javascript"> function drawFour(id) { //获取canvas元素 var canvas = document.getElementById("

HTML5之Canvas画圆形

1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>HTML5之Canvas画圆形</title> </head> <body onLoad="drawFour('canvas')"> <canvas id="canvas" width="1200" height=&

HTML5之Canvas时钟(网页效果--每日一更)

今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:http://webfront.verynet.cc/pc/canvas-clock.html 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由JavaScript控制的即时模式位图区域.即时模式是指在画布上呈现像素的方式, HTML5 Canvas通过JavaScript调用CanvasAPI,在每一帧完全重绘屏幕上的位图.详细将在下面代码进行说明. HTML结构代码

HTML5 在canvas中绘制矩形

作者:卿笃军 原文地址:http://blog.csdn.net/qingdujun/article/details/32930501 一.绘制矩形 canvas使用原点(0,0)在左上角的坐标系统,x坐标向右递增,y坐标向下递增. 使用绘图环境的矩形绘制函数来绘制矩形. fillRect(x,y,width,height) : 绘制一个实心的矩形. strokeRect(x,y,width,height) : 绘制一个空心的矩形. clearRect(x,y,width,height) : 清