画线条:
绘制线条,其实是绘制路径!
一条线段,需要一个起始点和一个终点,
由此需要一个设置起始点的函数和一个设置终点的函数
函数如下
context.moveTo(x,y)
参数x,y表示起始位置坐标
context.lineTo(x,y)
参数x,y表示终点位置坐标
光写这2个没用,至于为什么,不要问,这是规定,你需要在开始画前,调用开始函数
context.beginPath();
意思就是我要开始画线了(Path单词就知道是画路径)
结束也要调用函数
context.closePath();
意思就是路径的参数我都配置好了
最后还需要调用函数把他画出来
context.stroke();
意思就是把上面参数的轮廓画出来
这样就画出来了
代码如下:
<!DOCTYPE html> <!-- 告诉浏览器我们使用的HTML模板为HTML5 -->
<html lang="en"> <!-- 网页页面的根,其他元素均放在其中,只能有一个 -->
<head> <!--页面所有meta元素均包含在这里 -->
<meta charset="UTF-8"> <!-- 编码方式 -->
<title>Canves高速入门</title> <!-- 页面设置名称,显示在浏览器标题栏中 -->
<!-- CSS 及 javascript 代码放置处 -->
<script type="text/javascript" src="jquery-3.3.1.min.js"></script> <!-- 引用jQuery库-->
<script type="text/javascript">
$(document).ready(function(){
//alert("HELLO WORLD!!!")
var canvas = $("#mycanvas");
var context = canvas.get(0).getContext("2d");
context.beginPath();
context.moveTo(10,10);
context.lineTo(200,400);
context.closePath();
context.stroke();
});
</script>
</head>
<body> <!-- 页面的主题内容均在这里 -->
<canvas width="500" height="500" id="mycanvas" style="background-color: #113344"></canvas>
</body>
</html>
效果图:
改变颜色
在绘画前插入以下函数
context.strokeStyle="#23ada1";
代码如下:
<script type="text/javascript">
$(document).ready(function(){
//alert("HELLO WORLD!!!")
var canvas = $("#mycanvas");
var context = canvas.get(0).getContext("2d");
context.strokeStyle="#23ada1";
context.beginPath();
context.moveTo(10,10);
context.lineTo(200,400);
context.closePath();
context.stroke();
});
</script>
效果图:
改变线条粗细
在绘画前插入以下函数
context.lineWidth=20;
代码如下:
<script type="text/javascript">
$(document).ready(function(){
//alert("HELLO WORLD!!!")
var canvas = $("#mycanvas");
var context = canvas.get(0).getContext("2d");
context.strokeStyle = "#23ada1";
context.lineWidth = 20;
context.beginPath();
context.moveTo(10,10);
context.lineTo(200,400);
context.closePath();
context.stroke();
});
</script>
效果图: