首页 > 代码库 > canvas入门（绘制篇）
canvas入门（绘制篇）
什么是canvas？
canvas即画布，HTML5的canvas元素可以在其矩形区域绘制图像。
创建canvas，通过js创建context对象
<canvas id="canvas" width="500" height="300"></canvas>
<script type="text/javascript">
var c=document.getElementById("canvas");
var cxt=c.getContext("2d");
</script>
ps： 画布的宽度和高度只能通过标签属性设置，如果使用style控制画布会被拉伸
画布的坐标
x为500，y为300. 分别对应宽和高
绘制线条
<script type="text/javascript">
var c=document.getElementById("canvas");
var cxt=c.getContext("2d");
cxt.moveTo(250,150); //线条起点
cxt.lineWidth=10; //线条宽度
cxt.lineCap="round"; //线条端点样式 round,square
cxt.lineTo(500,300); //线条终点
cxt.strokeStyle="#ff0000"; //线条颜色
cxt.stroke(); //绘制
</script>
绘制矩形
<script type="text/javascript">
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke(); //等同于ctx.strokeRect(20,20,150,100);
ctx.rect(20,20,150,100);
ctx.fill(); //等同于ctx.fillRect(20,20,150,100);
</script>
rect( x , y , w , h) ;
x : 矩形左上角x坐标
y : 矩形左上角y坐标
w : 矩形宽度
h : 矩形高度
绘制圆弧
<script type="text/javascript">
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
</script>
arc(x,y,r,开始角,结束角,顺时针绘图false/逆时针回复true)
实例？？
前端小白今天看了一下画布的基础用法，先做了一个时钟 . .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var r = width / 2;
var r2 = r * 0.85;
function draw(){
ctx.clearRect(0,0,width,height); //清空矩形区域的元素
//外圆
ctx.beginPath(); //起始路径
ctx.arc(r, r, r - 5, 0, 2 * Math.PI, true);
ctx.lineWidth = 10;
ctx.strokeStyle = ‘green‘;
ctx.stroke();
ctx.closePath(); //闭合路径
//内圆
ctx.beginPath();
ctx.arc(r, r, r2, 0, 2 * Math.PI, true);
ctx.lineWidth = 1;
ctx.strokeStyle = ‘#000‘;
ctx.stroke();
ctx.closePath();
//内圆点
var hour = [6, 5, 4, 3, 2, 1, 12, 11, 10, 9, 8, 7],
i = 0;
for (var deg = 0; deg < 360; deg = deg + 6) {
var spotX = r + r2 * Math.sin(deg * 2 * Math.PI / 360);
var spotY = r + r2 * Math.cos(deg * 2 * Math.PI / 360);
var spot = r * 0.02;
ctx.beginPath();
ctx.fillStyle = "#ccc";
if (deg % 30 == 0) {
ctx.fillStyle = "#000";
spot = r * 0.025;
var textX = r + (r2 * 0.85) * Math.sin(deg * 2 * Math.PI / 360);
var textY = r + (r2 * 0.85) * Math.cos(deg * 2 * Math.PI / 360);
ctx.font = r * 0.1 + "px Arial";
ctx.textBaseline = "middle";
ctx.textAlign = "center";
ctx.fillText(hour[i], textX, textY);
i++;
}
ctx.arc(spotX, spotY, spot, 0, 2 * Math.PI);
ctx.fill();
ctx.closePath();
}
//中心圆点
ctx.beginPath();
ctx.arc(r, r, r * 0.05, 0, 2 * Math.PI, true);
ctx.lineWidth = 1;
ctx.strokeStyle = ‘#000‘;
ctx.stroke();
ctx.closePath();
}
//时针
function drawHours(h,m){
ctx.save();
ctx.translate(r,r);
ctx.beginPath();
ctx.rotate(2*Math.PI/12*h+2*Math.PI/12/60*m);
ctx.strokeStyle = ‘#000‘;
ctx.lineWidth = 5;
ctx.lineCap = ‘round‘;
ctx.moveTo(0,r*0.4*0.2);
ctx.lineTo(0,-r*0.4);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
//分针
function drawMinute(m,s){
ctx.save();
ctx.translate(r,r);
ctx.beginPath();
ctx.rotate(2*Math.PI/60*m+2*Math.PI/60/60*s);
ctx.strokeStyle = ‘#000‘;
ctx.lineWidth = 2;
ctx.lineCap = ‘round‘;
ctx.moveTo(0,r*0.6*0.2);
ctx.lineTo(0,-r*0.6);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
//秒针
function drawSecond(s){
ctx.save();
ctx.translate(r,r);
ctx.beginPath();
ctx.rotate(2*Math.PI/60*s);
ctx.strokeStyle = ‘#f00‘;
ctx.lineWidth = 1;
ctx.lineCap = ‘round‘;
ctx.moveTo(0,r*0.8*0.2);
ctx.lineTo(0,-r*0.8);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
setInterval(function(){
var now = new Date();
h = now.getHours();
m = now.getMinutes();
s = now.getSeconds();
draw();
drawHours(h,m);
drawMinute(m,s);
drawSecond(s);
},1000);
</script>
</body>
</html>
参考文档： http://www.w3school.com.cn/html5/html_5_canvas.asp
canvas入门（绘制篇）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。