html5 之canvas

liuwuyue

浏览: 22898 次
性别:
来自: 杭州

最近访客更多访客>>

wuzuyu365

fengde

fcr1209973

shaojianjun521

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

html5

canvas html5

html５汹涌而来。拿来玩玩。今天学习canvas。
首先上个例子，自己写了一个实现圆角矩形方法。
　　
function drawRoundRect(ctx,x,y,w,h){
var d1 = 1/40*w;　//设置 d1 d2的默认长度为贝塞尔曲线取中间控制点做准备
var d2 = 1/50*w ;
ctx.beginPath();　
// 第一个节点
ctx.moveTo(x,y+d1+d2)　;　//起始点
ctx.bezierCurveTo(x,y+d1,x+d1,y,x+d2+d1,y); //第一个圆角
ctx.lineTo(x+w-d1-d2,y); //连接线
ctx.bezierCurveTo(x+w-d1,y,x+w,y+d1,x+w,y+d1+d2); //第二个圆角
   ctx.lineTo(x+w,y+h-d1-d2); //连接线
ctx.bezierCurveTo(x+w,y+h-d1,x+w-d1,y+h,x+w-d1-d2,y+h); //第三个圆角
ctx.lineTo(x+d1+d2,y+h);　//连接线
ctx.bezierCurveTo(x+d1,y+h,x,y+h-d1,x,y+h-d1-d2); //第四个圆角
ctx.lineTo(x,y+d1+d2);//连接线
ctx.strokeStyle='#99ff00'; //设置画线颜色
ctx.stroke();//画线
}//画出圆角矩形 x y 为起始结点，w,h 为宽高 ctx 为画布环境

html5头部的声明如下：
　<!DOCTYPE html>

html５页面如下：
　　<!DOCTYPE html>
<html class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>html5 测试</title>
<script src="../js/modernizr-2.0.6.js"></script>
<style type="text/css">
.html-canvas{
width:300px;
height:400px;
}

</style>
</head>
<body>
<canvas id="draw-in-me" class="html-canvas">
<p>powered by html5</p>

</canvas>

<script src="../js/test1.js"></script>
</body>

</html>

使用了modernizer对浏览器是否支持相关功能进行检测。
     getContext('2d'); //目前还只是支持获取2d画布环境
canvas　图形的话，只能画矩形，其余就只能画线。当然圆也可以。
　　　画线的工具函数：
　　　　　　　　　moveTo(x,y); //起始点设置
                           lineTo(x,y);　//画直线
                           bezierCurveTo(x1,y1,x2,y2,x,y); //画两个控制点的贝塞尔曲线
　　　　画线的步骤
              beginPath();
            closePath(), fill(),stroke() 等。
画圆
   arc(x,y ,r,start,end,clockWise); //画圆或者环
      x ,y 圆心
     start end 弧度
     r 半径
     clockwise 顺时针　逆时针　true　为逆时针
画矩形
     fillRect(x,y ,w,h); 画矩形
        x,y 起始坐标，w ,h 宽高。等。
其他诸如：
ctx.strokeStyle fillStyle 设置画线　或填充的颜色。等修饰性的属性.

参考文档我引用的另一个文档。
　　　　　

分享到：