【学习日记】canvas的入门
2019-07-04 本文已影响0人
小黑马i
此文章只是个人记录学习用的，如果写的不好或者有什么不对的地方还请各位大神指点一下
//初始化一个画布，包括HTML方面
<head>
<meta charset="utf-8">
<title>【学习日记】canvas的入门</title>
<style type="text/css">
*{margin:0;padding: 0}
#mycanvas{
position: fixed;/*讲画布*/
left: 0; /*固定在*/
right: 0; /*页面的*/
bottom: 0; /*正中间*/
top:0; /*方便观看*/
margin: auto;
border: 1px solid #ccc
}
</style>
</head>
<body>
<canvas id="mycanvas" width="600" height="400"></canvas>
</body>
</html>
<script type="text/javascript">
// 找到 <canvas> 元素
var cv = document.getElementById("mycanvas");
// 创建 context 对象
var cva = cv.getContext("2d");
//设置画笔颜色(CSS颜色，渐变，图案)
cva.strokeStyle = "#00ff00"
// 设置填充颜色(CSS颜色，渐变，图案)
cva.fillStyle="#FF0000";
// 设置笔触大小
cva.lineWidth="6";
// fillRect 绘制矩形
// 用法 fillRect(矩形的左上角x的坐标,矩形的左上角y的坐标,矩形的宽,矩形的高)
// 举个栗子
cva.fillRect(10,10,100,100);
// 或者使用rect 绘制空心圆
cva.rect(10,10,100,100);
cva.stroke();
</script>
效果图
持续更新ing
