Canvas ——画函数线
canvas学习
2.请运用HTML5的Canvas功能,画出以下的三个数学图形。使用Math.sin(x), Math.exp(x)函数,其中x以Math.PI(3.14159)为单位。请同学完成此网页内容与相应所需的java script。
涉及的知识
- canvas 的使用
- 数学 函数的使用
代码实现
<!DOCTYPE html>
<html>
<head>
<style>
#mycanvas1 {
background-color: khaki;
}
#mycanvas2 {
background-color:aquamarine;
}
#mycanvas3 {
background-color:goldenrod;
}
</style>
<title >2-画函数图</title>
<script type="text/javascript">
function drawShape() {
//使用DOM获取画布元素
var canvas = document.getElementById('mycanvas1');
var cot1 = canvas.getContext("2d");
cot1.translate(10, 110); //转换坐标原点
cot1.strokeStyle = '#000000';//设定线条颜色 预设为 黑色
cot1.lineWidth = 0.5;//设定线条宽度 预设为 1
cot1.lineCap = 'round'; //设定线头格式 square / round / butt 默认值为square
cot1.beginPath();
//画一条水平的线
cot1.moveTo(-10, 0);//移到那一个坐标点 (X,Y)
cot1.lineTo(220, 0);//从x点到y点
//画一条垂直的线
cot1.moveTo(0, -110);
cot1.lineTo(0, 110);
cot1.closePath(); //关闭绘制路径
cot1.stroke();//绘制边线
//画出多条虚线
cot1.setLineDash([2, 6]);
cot1.moveTo(-10, -100);//上虚线
cot1.lineTo(220, -100);
cot1.moveTo(-10, 100);//下虚线
cot1.lineTo(220, 100);
cot1.moveTo(100, -110);//中虚线
cot1.lineTo(100, 110);
cot1.moveTo(