网页游戏Flappy Birds从0开始制作:补充canvas知识
1.对于HTML5的内容，为了处理浏览器兼容问题，所以我们首先需要判断浏览器是否支持canvas标签，判断方法如下:<body>
<h1>判断浏览器是否支持canvas</h1>
<canvas>
你的浏览器不支持canvas标签
</canvas>
</body>当浏览器显示：
说明浏览器是支持Canvas的。
2.在Canva上绘制矩形：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<h1>Canva绘画</h1>
<canvas id="canv" width='800px' height='600px'>你的浏览器不支持canvas</canvas>
</body>
<script>
var c= document.getElementById("canv");
var m=c.getContext("2d");
m.fillStyle="#f00";
m.fillRect(0,0,300,300);
m.fillStyle="rgba(0,0,255,0.5)";
m.fillRect(200,200,500,500);
</script>
</html>
3.绘制线条，连接：
var c= document.getElementById("canv");
var m=c.getContext("2d");
m.lineWidth=5;//定义线条的宽度
m.strokeStyle="red";//定义线条的样式
m.moveTo(10,10);//起始位置
m.lineTo(150,150);//终止位置
m.lineTo(10,50);//如果没有再次设置起始位置将从结束位置开始画
m.stroke() //开始划线。
注意：如果没有stroke()函数，表示还没有画图终止，会不给你显示！！
所以，画点完成必须stroke();
4.画圆：
m.beginPath();//从新开始画，防止冲突重叠
m.fillStyle="#0ff";
m.arc(100,100,50,0,Math.PI*2,true);
m.closePath();//结束画布，防止冲突重叠
m.fill();//开始渲染
arc()的6个参数，第一个参数和第二个参数表示所要画弧(圆)的圆心，第三个参数表示半径，第四个参数0表示从3点钟的方向开始画(x轴哪里)，第五个参数表示所画圆弧的大小，第六个参数为true表示逆时针，false为顺时针.
5.Canvas渐变色：
var j=m.createLinearGradient(0,0,175,50);
j.addColorStop(0,"blue");
j.addColorStop(0.5,"green");
j.addColorStop(1,"red");
m.fillStyle = j;
m.fillRect(0,0,175,50);
更多效果可以在菜鸟教程里查看菜鸟教程--Canvas
785
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
