H5 canvas学习----基础知识
一.canvas的简介和基本使用:
1.canvas是什么?
a)是一个html5新增的标签
b)是一个画布，可以通过js的api添加图案
2.canvas能做什么？使用场景
应用场景：
1》做游戏
2》画图案
3.canvas使用
a) <canvas></canvas>
b) 创建一个2d对象
getContext(“2d”)
ps：3d需要插件的支持
c) 画内容
二.canvas初识：
<style>
#myCanvas{
border:1px solid red;
}
</style>
<body>
<canvas id='myCanvas'></canvas>
<script>
var myCanvas = document.getElementById("myCanvas");
var cvs = myCanvas.getContext("2d");
//必须转换成2D对象
cvs.fillStyle='blue';
cvs.fillRect(20,10,100,100);
//20：x轴坐标
//10：y轴坐标
//100：width
//100：high
</script>
三.canvas填充，无填充
1、有填充
fillStyle ===》颜色
fillRect ===》位置、大小
2、无填充
strokeStyle=‘orange’;
strokeRect(100,50,100,100);
<style>
#myCanvas{
border:1px solid red;
}
</style>
<body>
<canvas id='myCanvas'></canvas>
<script>
var myCanvas = document.getElementById("myCanvas");
myCanvas.width = 500;
myCanvas.height = 500;//画布大小，若不设置 默认为300*150
var cvs = myCanvas.getContext("2d");
cvs.fillStyle='blue';
cvs.fillRect(10,1
最低0.47元/天 解锁文章
332
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
