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

html5--canvas学习笔记

2016-03-29 17:52 513 查看

1. 添加<canvas>元素

right:

<canvas id="myCanvas" width="300" height="300"></canvas>

wrong:

.myCanvas{width:300px;height:300px;}
<canvas id="myCanvas"></canvas>

当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。

<canvas> 元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。

2. 获取2D渲染上下文

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

3. 开始绘制

画布坐标空间：

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<canvas id='hc1' width='400' height='300' style='border:1px solid red;'>
</canvas>

</html>
<script>
var canvas = document.getElementById("hc1");
var ctx = canvas.getContext("2d");
function addHorizWing(x1,y1,w){
var h=30;
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.quadraticCurveTo(x1+w,y1+h,x1+w,y1);
ctx.fill();
ctx.moveTo(x1,y1);
ctx.quadraticCurveTo(x1+w,y1-h,x1+w,y1);
ctx.fill()
}
addHorizWing(150,50,-120);
addHorizWing(150,50,120);
function addRect(x,y,w,h) {
ctx.moveTo(x,y);
ctx.fillRect(x,y,w,h);
}
addRect(146,40,8,25);
ctx.moveTo(150,58);
ctx.lineTo(140,85);
ctx.lineTo(160,85);
ctx.fill();
ctx.beginPath();
//ctx.moveTo(140,140);
//ctx.lineTo(100,140);
ctx.arc(150,150,70,0.95*Math.PI,1.5*Math.PI);
ctx.lineTo(190,83);
ctx.bezierCurveTo(220,100,220,150,210,160);
ctx.bezierCurveTo(190,180,100,180,80,160)
ctx.fill();
ctx.beginPath();
ctx.fillStyle='#fff';
ctx.arc(135,135,40,Math.PI,1.5*Math.PI);
ctx.lineTo(145,95);
ctx.lineTo(145,135);
ctx.fill();
//ctx.stroke();
ctx.fillStyle='#000';
addRect(120,170,8,30);
addRect(170,170,8,30);
ctx.lineWidth=8;
ctx.lineCap="round";
ctx.beginPath();
//ctx.strokeStyle='#f00';
ctx.arc(90,180,20,0.5*Math.PI,0.8*Math.PI);
ctx.stroke();
//ctx.moveTo(110,200);
addRect(90,196,110,8);
//ctx.fill();
</script>

View Code

来自Canvas的基本用法， HTML 5 Canvas 参考手册

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航