html5绘制基本图形-直线
来源:互联网 发布:专业读书软件 编辑:程序博客网 时间:2024/05/17 04:44
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制直线</title>
</head>
<body>
<canvas id="canvas" width="400" height="300" style="border:1px solid blue;"></canvas>
<script>
var c=document.getElementById('canvas');
var cxt=c.getContext("2d");
// cxt.beginPath();//
cxt.strokeStyle="red";
cxt.moveTo(10,10);
cxt.lineTo(10,50);
cxt.lineTo(150,50);
cxt.lineWidth=10;
cxt.stroke();//stroke()表示绘制线条
cxt.fill();//fill表示填充图形
// cxt.stroke();
// cxt.closePath();
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>绘制直线</title>
</head>
<body>
<canvas id="canvas" width="400" height="300" style="border:1px solid blue;"></canvas>
<script>
var c=document.getElementById('canvas');
var cxt=c.getContext("2d");
// cxt.beginPath();//
cxt.strokeStyle="red";
cxt.moveTo(10,10);
cxt.lineTo(10,50);
cxt.lineTo(150,50);
cxt.lineWidth=10;
cxt.stroke();//stroke()表示绘制线条
cxt.fill();//fill表示填充图形
// cxt.stroke();
// cxt.closePath();
</script>
</body>
</html>
0 0
- html5绘制基本图形-直线
- html5 canvas基本图形绘制
- html5绘制基本图形-圆形
- HTML5 绘制图形 Canvas 与 SVG 的基本用法
- html5 绘制图形
- HTML5 绘制图形【4】
- 利用HTML5绘制图形
- html5绘制图形
- html5 canvsast元素绘制直线
- Canvas入门(1):绘制矩形、圆、直线、曲线等基本图形
- 【Unity Shader学习笔记】(三)绘制点、直线、网格等基本图形
- 基本图形绘制
- 绘制基本图形
- Ogre 绘制基本图形
- 基本图形绘制
- QT 基本图形绘制
- 基本图形的绘制
- ios基本图形绘制
- 虚拟机软件
- 笔记本电脑光驱位置装固态硬盘流程
- vi编辑器使用
- 产品设计流程(已标注)
- spring -- aop基于xml的简单实现
- html5绘制基本图形-直线
- java实现算法之堆排序
- JSP+JavaBean与JSP+Servlet+JavaBean模型
- C++第5次上机实验—数组分离
- Android中自定义常用的三个对象解析(Paint,Color,Canvas)
- PHP动态网页脚本
- HDU 1213 How Many Tables (并查集)
- laravel(一)路由,参数传递,blade
- toolbar显示返回箭头