手机版 | 登陆 | 注册 | 留言 | 设首页 | 加收藏
当前位置: 网站首页 > 在线教程百科 > HTML+CSS教程 > 文章 当前位置: HTML+CSS教程 > 文章

Canvas 基本功能-画直线

时间:2019-10-18    点击: 次    来源:网络    作者:佚名 - 小 + 大

Canvas 基本功能1
1.绘制基本图形
当然所谓基本图形就是线,矩形,圆等简单的图形。任何复杂的图形都是由这些简单的图形组合而成的,首先来了解一下绘制的方法。
1.1画线
你可能是第一次接触Canvas绘图,首先我们绘制一个简单的直线来学习Canvas的功能。

<html>
<body>
<canvas id="myCanvas" width="200" height="100">
Not suppotted HTML5
<canvas>
<script type="text/javascript">

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=10;   //画笔宽度
ctx.strokeStyle="red"; //画笔颜色
ctx.beginPath();  // 画新的路径
ctx.moveTo(10,10); // 开始画坐标
ctx.lineTo(155,150); // 结束画坐标
ctx.stroke();

</script>
</body>
</html>

canvas
应linaCap来定义画线冒

<html>
<body>
<canvas id="myCanvas" width="200" height="100">
Not suppotted HTML5
<canvas>
<script type="text/javascript">

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=10;   //画笔宽度
ctx.strokeStyle="red"; //画笔颜色

ctx.lineCap="butt";
ctx.beginPath();  // 画新的路径
ctx.moveTo(10,10); // 开始画坐标
ctx.lineTo(155,150); // 结束画坐标
ctx.stroke();

ctx.lineCap="round";
ctx.beginPath();  // 画新的路径
ctx.moveTo(10,20); // 开始画坐标
ctx.lineTo(155,150); // 结束画坐标
ctx.stroke();

ctx.lineCap="square";
ctx.beginPath();  // 画新的路径
ctx.moveTo(10,30); // 开始画坐标
ctx.lineTo(155,150); // 结束画坐标
ctx.stroke();
</script>
</body>

</html>

canvas

上一篇:表单的基础知识

下一篇:没有了

备案ICP编号  |   QQ:81962480  |  地址:上海金海路  |  电话:12345678910  |  
Copyright © 2019 MAPDF Studio 版权所有,授权www.mapdf.net使用 Powered by MAPDF.net