1.画正方形

代码如下

<style>canvas {margin: 0 auto;border: 2px solid #aaa;display: block; /*画布居中*/}
</style>
<body><canvas id="cont" width="500px" height="500px">Hello Canvas</canvas><script>//获取画布var canvas = document.querySelector("#cont");//获取画布上下文var ctx = canvas.getContext('2d');/*//开启一条路径ctx.beginPath();//确定起始点ctx.moveTo(100, 100);//确定结束点ctx.lineTo(400, 100);//着色之前设置颜色和线宽ctx.strokeStyle = 'green';ctx.lineWidth = 5;//着色ctx.stroke();//结束路径ctx.closePath();*/
function drawLine(x1, y1, x2, y2, color, width) {ctx.beginPath();ctx.moveTo(x1, y1);ctx.lineTo(x2, y2);ctx.strokeStyle = color;ctx.lineWidth = width;ctx.stroke();ctx.closePath();
}
drawLine(100, 100, 400, 100, 'green', 5);
drawLine(400, 100, 400, 400, 'purple', 5);
drawLine(400, 400, 100, 400, 'orange', 5);
drawLine(100, 400, 100, 100, 'blue', 5);</script>
</body>

直线封装：用函数将画线的代码封装起来
结果如下

2.画三角形

代码如下

<style>canvas {margin: 0 auto;border: 2px solid #aaa;display: block; /*画布居中*/}
</style>
<body><canvas id="cont" width="500px" height="500px">Hello Canvas</canvas><script>var canvas = document.querySelector("#cont");//获取画布上下文var ctx = canvas.getContext('2d');ctx.beginPath();ctx.moveTo(100, 100);//此处直线连用，画完三条线再关闭路径ctx.lineTo(400, 100);ctx.lineTo(400, 400);ctx.lineTo(100, 100);ctx.strokeStyle = 'purple';ctx.lineWidth = 5;ctx.stroke();ctx.closePath();</script>
</body>

结果如下

3.画虚线

代码如下

<style>canvas {margin: 0 auto;border: 2px solid #aaa;display: block; /*画布居中*/}
</style>
<body><canvas id="cont" width="500px" height="500px">Hello Canvas</canvas><script>var canvas = document.querySelector("#cont");var ctx = canvas.getContext('2d');function drawLine(x1, y1, x2, y2, color, width) {ctx.beginPath();ctx.moveTo(x1, y1);ctx.lineTo(x2, y2);ctx.strokeStyle = color;ctx.lineWidth = width;ctx.stroke();ctx.closePath();}  //画直的虚线for (var i = 0; i < 30; i++) {drawLine(100+10*i, 100, 105+10*i, 100, 'purple', 2);}//画斜的虚线for (var i = 0; i < 30; i++) {drawLine(100+10*i, 100+10*i, 105+10*i, 105+10*i, 'green', 2)}</script>
</body>

画虚线的原理就是画一条一条的短实线
结果如下

canvas画正方形、三角形以及虚线相关推荐

html5画直线箭头,HTML5 canvas画带箭头的虚线
今天给大家讲解的是在HTML5 canvas画带箭头的虚线.关于Canvas 对象表示一个 HTML 画布元素 -.它没有自己的行为,但是定义了一个 API 支持脚本化客户端绘图操作. 本案例注意事项 ...
html 绘制正方形,HTML5之Canvas画正方形
HTML5之Canvas画正方形 1.设计源码 HTML5之Canvas画正方形 function drawFour(id) { //获取canvas元素 var canvas = document. ...
HTML5 Canvas 画虚线组件
前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js 1 if (window.CanvasRenderi ...
python画长方形的代码_python使用turtle画一个三角形、正方形（矩形或四边形）
今天我们用python使用turtle库画一个三角形.一个正方形. 1.画一个三角形. 实现方法是先画一个直线,然后旋转120度,然后继续画直线.这样反复画三条直线后,就形成一个等边三角形.先看效果: ...
vue3.0 + typescript openlayers实现地图标点、移动、画线、显示范围、测量长度、测量面积、画三角形、画正方形、画圆、线选、画笔、清除测量、清除、地图上展示弹窗等功能
vue3.0 + typescript openlayers实现地图标点.移动.画线.显示范围.测量长度.测量面积.画三角形.画正方形.画圆.线选.画笔.清除测量.清除地图所有等功能由于最近项目中用 ...
python使用turtle画一个三角形、正方形（矩形或四边形）
今天我们用python使用turtle库画一个三角形.一个正方形. 1.画一个三角形. 实现方法是先画一个直线,然后旋转120度,然后继续画直线.这样反复画三条直线后,就形成一个等边三角形.先看效果: ...
python画正方形内切圆_python画出三角形外接圆和内切圆的方法
刚看了<最强大脑>中英对决,其中难度最大的项目需要选手先脑补泰森多边形,再找出完全相同的两个泰森多边形.在惊呆且感叹自身头脑愚笨的同时,不免手痒想要借助电脑弄个图出来看看,闲来无事吹吹牛也 ...
[html] 请使用canvas画一个渐变的长方形
[html] 请使用canvas画一个渐变的长方形 // 普通canvas绘图工具类// umd适配多种引入方式 (function(root, factory) {if (typeof define ...
python画正方形-用python画正方形
广告关闭腾讯云11.11云上盛惠 ,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元! 我正在学习python学习教程,我无法打开屏幕进行绘图. 我没有发现错误,它只是 ...

canvas画正方形、三角形以及虚线

1.画正方形

2.画三角形

3.画虚线

canvas画正方形、三角形以及虚线相关推荐

最新文章

热门文章