HTML5 知识库
html5 之canvas
阅读:1413次
评论:0条
更新时间:2011-08-11
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 设置画线 或填充的颜色。等修饰性的属性.
参考文档我引用的另一个文档。
首先上个例子，自己写了一个实现圆角矩形方法。
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 设置画线 或填充的颜色。等修饰性的属性.
参考文档我引用的另一个文档。
评论 共 0 条 请登录后发表评论
您还没有登录,请您登录后再发表评论
