您的位置：首页 > Web前端 > HTML5

Canvas常用语法详解

2017-04-19 10:01 218 查看
Canvas是HTML5的新增标签，通过创建画布，在画布上创建任何想要的形状。

一、标签原型

<canvas width="1000" height="1000" id="demo">
您的浏览器版本太低，不支持HTML5新增的canvas标签！
</canvas>


使用js获取画布，并指定对象

<script>
var demo = document.getElementById('demo');
var cxt = demo.getContext('2d');
</script>


二、Canvas标签常见属性

属性值功能描述
widthpx设置canvas的宽度
heightpx设置canvas的高度
注意：属性中不用带单位

三、Canvas标签的API整合

属性值功能描述
save()Canvas.save();保存当前画布环境
restoreCanvas.restore();返回之前保存的画布的路径状态，与save()成对用
getContext()Canvas.getContext();返回一个对象，指出访问绘图功能必要的API
toDataURL()Canvas.toDataURL();返回canvas图像的URL
说明：save() / restore()的使用情况：

在画线等操作时，会出现旋转、平移、缩放等，它所旋转的是整个画布，而不是所画的线。所以需要在操作前保存画布状态，画线完成后再restore即可。

四、Canvas标签API的主要属性整合

a、画圆

属性值功能描述
fillStyleCanvas.fillStyle = ‘#333’;设置或返回用于填充绘画的颜色、渐变或模式
strokeStyleCanvas.strokeStyle = “#08a”;设置或返回用于笔触的颜色、见面或模式
beginPath()Canvas.beginPath();开启绘画路径
closePath()Canvas.closePath();关闭绘画路径
fill()Canvas.fill();填充
stroke()Canvas.stroke();画边框
arc()Canvas.arc(0,0,20,0,2*Math.PI,false);画圆
说明：arc参数：坐标点，半径，起始角度，结束角度，逆时针（默认）。

画圆代码片段：

<script>
var canvasID = document.getElementById('myCanvas');
var cxt = canvasID.getContext('2d');

//画圆方法
function drawArc(id){
cxt.beginPath();

cxt.lineWidth = 5;
cxt.fillStyle = "#00f";
cxt.strokeStyle = '#0f0';
cxt.arc(100,100,50,0,2*Math.PI,false);  // cxt.arc() 圆心，坐标，开始角，结束角，顺/逆时针
cxt.fill();
cxt.stroke();

cxt.closePath();
}
drawArc('demo');
</script>


b、画线

属性值功能描述
translateCanvas.translate(200,100);重置坐标原点
lineWidthCanvas.lineWidth = 5;设置线的宽度
moveTo()Canvas.moveTo(0,50);画线开始的位置
lineTo()Canvas.lineTo(0,100);画线结束的位置
clearRect()Canvas.clearRect(0,0,1000,1000);清空画布
说明：clearRect()参数：起始坐标和画布的宽高

画线片段代码：

<script>
//画线
function drawLine(id){
cxt.save();

cxt.translate(150,100);
cxt.lineWidth = 10;
cxt.strokeStyle = '#999';

cxt.beginPath();
cxt.moveTo(0,0);
cxt.lineTo(100,0);
cxt.closePath();

cxt.stroke();

cxt.restore();
}

drawLine('demo');
</script>


c、画多边形

画多边形代码，以三角形为例：

<script>
//画多边形,如三角形
function drawTrigon(id){
cxt.save();

cxt.translate(250,40);
cxt.lineWidth = 3;
cxt.strokeStyle = '#0f0';

cxt.beginPath();
cxt.moveTo(0,0);
cxt.lineTo(0,120);
cxt.lineTo(100,60);
cxt.lineTo(0,0);
cxt.stroke();
cxt.closePath();

cxt.restore();
}

drawTrigon('demo');
</script>


d、画文字

画文字片段代码：

<script>
//画文字
function drawText(id){
cxt.save();

cxt.translate(100,300);
cxt.fillStyle = "#879";
cxt.strokeStyle = '#09';
cxt.font = "normal 90px 微软雅黑";
cxt.fillText('Canvas Text',0,0);
cxt.strokeText('Canvas Text',0,0);

cxt.restore();
}
drawText('demo');
</script>


五、使用Canvas绘制时钟

代码片段：

imooc_clock.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>imooc_canvas_clock</title>
<style>
*{margin:0;padding:0;}
div{
text-align:center;
margin-top:250px;
}
/*#clock{
border:1px solid #ccc;
}*/
</style>
</head>
<body>
<div>
<canvas id="clock" width="200px" height="200px"></canvas>
</div>

<!-- js -->
<script src="imooc_clock.js"></script>
</body>
</html>


imooc_clock.js

/*
*1、画出静态背景：圆盘边，时刻数字，刻度点（时点特殊处理）
*2、画出静态的时分秒针
*3、时分秒针的时间关联
*4、动态时分秒针,清除画布,每秒重新画
*5、放大或缩小的效果：参数等比例缩放
*******/

var dom = document.getElementById('clock');
var ctx = dom.getContext('2d');

var width = ctx.canvas.width;  //获取canvas宽度
var height = ctx.canvas.height; //获取canvas高度
var  r = width/2;   //圆盘半径

//定义整体缩放比例
var rem = width / 200 ;

//定义方法画背景圆盘
function drawBackground(){
ctx.save();   // 保存环境， restore() 在 draw()中
ctx.translate(r,r);   //定义原点到正方形画布中心

//时钟外圈
ctx.beginPath();       //每画一条路径调用一次
ctx.lineWidth = 10 * rem;
ctx.arc(0,0,r - 5 * rem,0,2*Math.PI,false);
ctx.stroke();
ctx.closePath();

//画小时数和刻度点
var hourNumbers = [3,4,5,6,7,8,9,10,11,12,1,2];
ctx.font = 18 * rem + 'px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
hourNumbers.forEach(function(number,i){         //求每个刻度的坐标，将数字写入
var rad = 2 * Math.PI / 12 *i;
var x = Math.cos(rad) * (r - 30 * rem);
var y = Math.sin(rad) * (r - 30 * rem);
ctx.fillText(number,x,y);
});

//分钟/秒钟刻度点
for(var i = 0; i < 60 ;i++ ){
var rad = 2 * Math.PI / 60 *i;
var x = Math.cos(rad) * (r - 18 *rem);
var y = Math.sin(rad) * (r - 18 * rem);
ctx.beginPath();
//小时点特殊处理
if(i % 5 == 0){
ctx.fillStyle = "#000";
ctx.arc(x,y,2 * rem,0,2 * Math.PI,false);
}else{
ctx.fillStyle = '#ccc';
ctx.arc(x,y,2 * rem,0,2 * Math.PI,false);
}

ctx.fill();
ctx.closePath();
}

}

//时针
function drawHour(hour,minute){
ctx.save();
ctx.beginPath();
var rad = 2 * Math.PI / 12 * hour;
//分针与时针的关联
var mrad = 2 * Math.PI / 12 / 60 * minute;
ctx.rotate(rad + mrad);
ctx.lineWidth = 6 *rem;
ctx.lineCap = 'round';  //时针两端圆形
ctx.moveTo(0,10);
ctx.lineTo(0, -r / 2);  //往上是负，往下是正
ctx.stroke();
ctx.closePath();
ctx.restore();
}

//分针
function drawMinute(minute){
ctx.save();
ctx.beginPath();
var rad = 2 * Math.PI / 60 * minute;
ctx.rotate(rad);
ctx.lineWidth = 3 * rem;
ctx.lineCap = 'round';
ctx.moveTo(0,10);
ctx.lineTo(0, -r  + 30 * rem);  //往上是负，往下是正
ctx.stroke();
ctx.closePath();
ctx.restore();
}

//秒针
function drawSecond(second){    //秒针后粗前细,呈多边形梯形
ctx.save();
ctx.beginPath();
ctx.fillStyle = '#c14543';
var rad = 2 * Math.PI / 60 * second;
ctx.rotate(rad);
ctx.moveTo(-2 ,20 * rem);
ctx.lineTo(2 ,20 *rem);
ctx.lineTo(1, -r  + 18 * rem);  //往上是负，往下是正
ctx.lineTo(-1, -r + 18 * rem);
ctx.fill();
ctx.closePath();
ctx.restore();
}

// 表盘中心圆点
function drawDot(){
ctx.beginPath();
ctx.fillStyle = '#fff';
ctx.arc(0,0,3,0,2 * Math.PI , false);
ctx.fill();
ctx.closePath();
}

//动态时分秒针
function draw(){
ctx.clearRect(0,0,width,height);
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
drawBackground();
drawHour(hour,minute);
drawMinute(minute);
drawSecond(second);
drawDot();
ctx.restore();
}

draw(); //先执行一次，再执行setInterval()
setInterval(draw,1000);


实现的效果图如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  canvas html5
相关文章推荐
新的分享
章节导航