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标签常见属性
| 属性 | 值 | 功能描述 |
|---|---|---|
| width | px | 设置canvas的宽度 |
| height | px | 设置canvas的高度 |
注意：属性中不用带单位
三、Canvas标签的API整合
| 属性 | 值 | 功能描述 |
|---|---|---|
| save() | Canvas.save(); | 保存当前画布环境 |
| restore | Canvas.restore(); | 返回之前保存的画布的路径状态，与save()成对用 |
| getContext() | Canvas.getContext(); | 返回一个对象，指出访问绘图功能必要的API |
| toDataURL() | Canvas.toDataURL(); | 返回canvas图像的URL |
说明：save() / restore()的使用情况：
在画线等操作时，会出现旋转、平移、缩放等，它所旋转的是整个画布，而不是所画的线。所以需要在操作前保存画布状态，画线完成后再restore即可。
四、Canvas标签API的主要属性整合
a、画圆
| 属性 | 值 | 功能描述 |
|---|---|---|
| fillStyle | Canvas.fillStyle = ‘#333’; | 设置或返回用于填充绘画的颜色、渐变或模式 |
| strokeStyle | Canvas.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、画线
| 属性 | 值 | 功能描述 |
|---|---|---|
| translate | Canvas.translate(200,100); | 重置坐标原点 |
| lineWidth | Canvas.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);
实现的效果图如下：
3238
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
