您当前的位置： 首页 > 学无止境 > CSS3|Html5 网站首页CSS3|Html5
canvas标签介绍
发布时间：2015-05-19 07:15:42编辑：雪饮阅读（）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<canvas width="1000" height="1000" style="background:yellow" id="canvas">
雪饮个人博客温馨提示：你的浏览器不支持canvas标签
</canvas>
<script type="text/javascript">
//获取画布dom（一个页面可能有多个画布，我们要选择一个）
var cnavas=document.getElementById("canvas");
//设置绘图环境
var cxt=canvas.getContext('2d');
//下面我们来画一条线段
cxt.moveTo(20,20);//画线段之前必须先将笔触移动到要画线的开始位置
cxt.lineTo(100,20);//画线的结束位置
cxt.lineWidth=10;//设置画线的宽度（粗细）
cxt.strokeStyle="#00ff00";//设置画线的颜色
cxt.stroke();//上面将画线的起始位置设置好之后就可以开始画线了
cxt.closePath();//关闭当前画线的路径
//画一个空心圆形
cxt.beginPath();//开启一个新的路径
cxt.arc(200,200,50,0,360,false);//前两个参数为圆心，第三个参数是半径，第四、五个参数是画圆的度数起始点，最后一个参数决定画圆的顺序是正还是负
cxt.stroke();
cxt.closePath();
//画一个实心圆形
cxt.beginPath();
cxt.arc(200,100,50,0,360,false);
cxt.fillStyle="red";//设置填充颜色
cxt.fill();//画实心圆
cxt.closePath();
//画一个矩形
cxt.beginPath();
cxt.rect(300,20,100,100);//前两个是起始位置，后两个是宽高参数
cxt.stroke();
cxt.fill();
cxt.closePath();
//写入文字
cxt.font="80px 黑体";//设置字体和文字大小
cxt.lineWidth=1;
cxt.fillText("雪饮个人博客",20,300);//要写入的文字以及写入的坐标位置
cxt.strokeText("雪饮个人博客",20,340);//写入镂空字
//以上的凡事以路径为基础进行作画的都需要开启路径和关闭路径，否则会影响到其它的图形的作画的
//画一个三角形
cxt.beginPath();
cxt.moveTo(300,300);
cxt.lineTo(550,550);
cxt.lineTo(256,600);
cxt.closePath();//画多边形要先关闭路径然后才开始画的
cxt.stroke();
//旋转图片
//设置图片旋转环境
//先旋转图片
cxt.save();//先将现在的环境保存下，然后将要旋转的图片交给二次元空间旋转之后重新塞回来。
//重新映射0,0点的位置
cxt.translate(20,20);
//设置旋转角度 参数是弧度 角度0-360 弧度=角度*Math.PI/180
cxt.rotate(-30*Math.PI/180);
cxt.beginPath();
cxt.moveTo(0,0);//这里的0,0点已经不是上面画布的0,0点，而是以画布的20,20做为0,0点的
cxt.lineTo(20,100);
cxt.stroke();
cxt.closePath();
cxt.restore();//塞回来之后再次保存即可
//过程不可颠倒，先设置00点在旋转角度，然后画图
//然后旋转图片
cxt.save();
cxt.translate(20,370);
cxt.rotate(10*Math.PI/180);
var img=new Image();
img.src="logo.jpg";
cxt.drawImage(img,0,0,230,306);
//第一个参数是实例化的图片对象
//第二、三个参数是图片放置坐标，第四、五个参数是图片的大小
cxt.restore();
</script>
</body>
</html>
案例效果：
雪饮个人博客案例源码下载：canvas标签介绍.rar
关键字词：canvas,介绍,个人博客
上一篇：HTML5音视频介绍
下一篇：html5中智能表单的使用