您的位置：首页 > 其它

Canvas学习笔记

2015-10-15 20:05 183 查看

多媒体老师上课讲了html5中的Canvas元素，自认为学的不是非常的精通，因此，特地去看了慕课网上的视频。所以写点笔记

canvas是html5中的一个标记，因此，可以像其他标记一样，创建标记，一下是在css中创建canvas的画布。

<html>

<head>
<title>例1</title>

<style>
body {
background: #dddddd;
}

#canvas {
padding: 10px;
border: thin inset #aaaaaa;
margin: 10px;
background-color: white;
}
</style>
</head>

以下是在body中定义canvas的id

<body>
<canvas id='canvas' width='600' height='300'>
Canvas not supported
</canvas>

<script src='example1.js'></script>
</body>

</html>

也可以在id的标记中规定大小

在JS代码中获取canvas 元素的上下文绘制环境

var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');

context是canvas中的画布环境，在js中主要是对这个进行操作

一下是一些基本路径的绘制，绘制线段

context.moveTo(100,100);//将鼠标移到此处;
context.lineTo(700,700);//将鼠标移到此处，开始绘制
context.lineWidth = 5;//线条的宽度
context.closePath();
//要注意以上都是canvas状态的绘制，因此，若改变多次颜色改变的话，则会影响全部
//不要影响的话，就可以开始一条的的路径的绘制
//结束了路径的绘制就可以用不同的状态进行绘制
context.fillStyle = "red";//若形成的是一个封闭的曲线，则会定义填充的宽度
context.strokeStyle = "red";//线条描边的状态
context.stroke();//绘制线条，
//再次开始绘制路径
context.beginPath();

圆弧的绘制

context.beginPath();
//绘制弧线,需要5个参数,为坐标，半径，还有开始的圆角，结束的圆角Math.PI,是逆时针的排序的
//还有若设为true的话，则就是逆时针开始画的
context.arc(100,100,20,0,2*Math.PI,true);
context.strokeStyle = "blue"
context.stroke();
//也可以使用填充进行绘制,用closePath来连接,若用fill的话则不管有没有closePath都会连接成一个封闭的图像

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

标签：

相关文章推荐

新的分享

章节导航