html5——canvas画直线
2024-10-02 11:58:02
<html>
<head>
<title>canvas demo</title>
</head>
<body>
<canvas id="mycanvas" width="500px" height="500px" ></canvas>
<script type="text/javascript">
var mycanvas = document.getElementById("mycanvas");
var mycontext = mycanvas.getContext("2d"); mycontext.beginPath();
mycontext.strokeStyle = "red";
mycontext.moveTo(70, 140);
mycontext.lineTo(140, 70);
mycontext.lineTo(300,200);
mycontext.lineWidth="5";
mycontext.stroke(); mycontext.beginPath();
mycontext.strokeStyle = "blue";
mycontext.moveTo(200, 200);
mycontext.lineTo(400, 500);
mycontext.stroke();
</script>
<style>
#mycanvas{
border: solid 1px;
}
</style> </body>
</html>
效果图
beginPath()
刷新(开始)画图的开头
moveTo()
开始点
lineto()
记录点,可以多个
stroke()
绘制从beginPath()开始设置的定义图形
最新文章
- 来玩Play框架02 响应
- 使用sublime一键格式化XML文件
- js对象详解
- 第 11 章 进度条媒体对象和 Well 组件
- NOIP2004合并果子
- H3C dhcp 中继
- 边工作边刷题:70天一遍leetcode: day 85-4
- js实现网页防止被iframe框架嵌套及几种location.href的区别
- static单利模式
- Programming Concepts
- leetCode 70.Climbing Stairs (爬楼梯) 解题思路和方法
- 请问如何查询一个APP的Android和iOS下载量?
- stack源码
- Angular使用总结 --- 通过指令动态添加组件
- 酷开 5.5 版本安装第三方app
- 使用unbound提供DNS域名解析服务
- [Java学习]集合
- 解决SecureCRT超时自动断开的问题
- .NET:枚举的默认值
- 09Vue.js快速入门-Vue入门之Vuex实战