注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

Html5 Canvas (1)  

2011-03-29 22:27:30|  分类: Html5 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

Html5中定义了Canvas元素,可以在Canvas中绘制路径,各种图形,字符以及添加图片。

1.创建Canvas

<canvas id="c" height="200" width="150"></canvas>

2.通过JS绘制图形

<script type="text/javascript">

    var c = document.getElementById('c');//取得Dom元素

    var context = c.getContext("2d");//拿到Canvas的上下文 目前好像只支持2D渲染

    context.fillStyle = "#000000";//填充颜色

   context.fillRect(10,10,60,40); //绘制矩形

</script>

3.替换内容

并不是所有的浏览器都支持canvas ,如果不支持浏览器会忽略掉canvas元素直接渲染替换的内容

<canvas id="c" height="200" width="150">

     This is a canvas //替换的内容

</canvas>

4.检查浏览器支持

<script type="text/javascript">

   var c = document.getElementById('c');

   if(c.getContext){

       var context = c.getContext('2d');

      ... ...

  }

</script>

5.一个简单的例子

<!DOCTYPE HTML>

<html>

<head>

<title>Html5 Canvas</title>

</head>

<body>

 

<canvas id="c" height="200" width="150"></canvas>

 

<script type="text/javascript">

var c = document.getElementById('c');//取得Dom元素

    var context = c.getContext("2d");//拿到Canvas的上下文 目前好像只支持2D渲染

    context.fillStyle = "#000000";//填充颜色

    context.fillRect(10,10,60,40); //绘制矩形

</script>

 

</body>

</html>

6.Html5 Canvas API

http://dev.w3.org/html5/canvas-api/canvas-2d-api.html 

 

7.一些简单方法

fillStyle 可以设置填充色

context . fillStyle [ = value ]

strokeStyle 设置画笔的颜色

context . strokeStyle [ = value ]

fillRect 画一个矩形 用fillStyle来填充

strokeRect 画一个矩形 不填充

clearRect 清除矩形区域的像素

context . clearRect(x, y, w, h)

Clears all pixels on the canvas in the given rectangle to transparent black.

context . fillRect(x, y, w, h)

Paints the given rectangle onto the canvas, using the current fill style.

context . strokeRect(x, y, w, h)

Paints the box that outlines the given rectangle onto the canvas, using the current stroke style.

 

8.路径用法

路径可以想象成用铅笔画画

moveTo(x,y)  将铅笔移动到指定点作为起始点

lineTo(x,y) 画线到指定的结束点

先画一个网格

//画竖线

for(var x=0.5;x<800;x+10){

     context.moveTo(x,0);

     context.lineTo(x,600);

}

//画横线

for(var y=0.5;y<600;y+10){

       context.moveTo(0,y);

      context.lineTo(800,y);

}

一个例子 网格

<!DOCTYPE HTML>

<html>

<head>

<title>Html5 Canvas Path Grids</title>

</head>

<body>

 

<canvas id="c" height="600" width="850"></canvas>

 

<script type="text/javascript">

//画竖线

var c = document.getElementById("c");

var context = c.getContext("2d");

 

for(var x=0.5;x<800;x += 10){

context.moveTo(x,0);

context.lineTo(x,600);

}

//画横线

for(var y=0.5;y<600;y += 10){

       context.moveTo(0,y);

       context.lineTo(800,y);

}

//选择颜色

context.strokeStyle = "#ccc";

//渲染

context.stroke();

</script>

 

</body>

</html>

  Html5 Canvas (1) - zhenghaoju700 - zhenghaoju700 的博客?

9.路径的API
context . beginPath()

Resets the current path.

context . closePath()

Marks the current subpath as closed, and starts a new subpath with a point the same as the start and end of the newly closed subpath.

context . lineTo(x, y)

Adds the given point to the current subpath, connected to the previous point by a straight line.

context . moveTo(x, y)

Creates a new subpath with the given point as its first (and only) point.

context . stroke()

Creates the strokes of the subpaths with the current stroke style.

 



  评论这张
 
阅读(211)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017