JavaScript使用canvas绘制坐标和线

本文实例为大家分享了JavaScript使用canvas绘制坐标和线的具体代码，供大家参考，具体内容如下

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在指定位置画多个点</title>
    <style>
        canvas{
            border: 1px dashed gray;
        }
    </style>
</head>
<body>
    <canvas id="cvs" width="500" height="500"></canvas>
</body>
</html>

js代码:

<script>
    var cvs = document.getElementById('cvs');
    var ctx = cvs.getContext('2d');

    // 坐标轴距离画布上右下左的边距
    var padding = {
        top:20,
        right:20,
        bottom:20,
        left:20
    }
    // 坐标轴中箭头的宽和高
    var arrow = {
        width:12,
        height:20
    }
    // 求坐标轴上顶点的坐标
    var vertexTop = {
        x:padding.left,
        y:padding.top
    }
    // 求坐标轴原点的坐标
    var origin = {
        x:padding.left,
        y:cvs.height - padding.bottom
    }
    // 求坐标轴右顶点的坐标
    var vertexRight = {
        x:cvs.width - padding.left,
        y:cvs.height - padding.bottom
    }

    //设置线宽
    ctx.lineWidth = 2;
    //画坐标轴的两条线
    ctx.beginPath();
    ctx.moveTo(vertexTop.x,vertexTop.y);
    ctx.lineTo(origin.x,origin.y);
    ctx.lineTo(vertexRight.x,vertexRight.y);
    ctx.stroke();

    //如何画箭头
    //画顶上箭头
    // ^
    // |
    // |
    ctx.beginPath();
    ctx.moveTo(vertexTop.x,vertexTop.y);
    ctx.lineTo(vertexTop.x - arrow.width/2,vertexTop.y + arrow.height);
    ctx.lineTo(vertexTop.x,vertexTop.y + arrow.height/2);
    ctx.lineTo(vertexTop.x + arrow.width/2,vertexTop.y + arrow.height);
    ctx.fill();

    //画右边的箭头
    // --->
    ctx.beginPath();
    ctx.moveTo(vertexRight.x,vertexRight.y);
    ctx.lineTo(vertexRight.x - arrow.height,vertexRight.y - arrow.width);
    ctx.lineTo(vertexRight.x - arrow.height/2,vertexRight.y);
    ctx.lineTo(vertexRight.x - arrow.height,vertexRight.y + arrow.width);
    ctx.fill();

    /*
     * 在坐标轴中指定位置画点，坐标算法：
     * 点的x轴：原点x坐标 + 点到原点的水平距离
     * 点的y轴：原点y坐标 - 点到原点的垂直距离
     */
    //定义点的坐标
    var points = [[10,10],[50,50],[90,90],[130,130],[170,170],[200,200]];
    //在坐标中画点 使用循环遍历数组中的坐标
    //设置颜色
    ctx.fillStyle = "green";
    points.forEach(function(arr){
        ctx.fillRect(origin.x + arr[0],origin.y - arr[1],5,5);
    });
    //根据点连线
    //防止重绘
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.strokeStyle = "yellow";
    points.forEach(function (arr) {
        ctx.lineTo(origin.x + arr[0] + 1.8,origin.y - arr[1] + 1.8);
    });
    //描边
    ctx.stroke();
</script>

效果如下:

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • canvas绘制的直线动画

    话不多说,请看代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>first line</title> <style type="text/css"> body{ background: #456E89; } .canvas { height: 300px; width: 300px; margin: 0 a

  • JavaScript使用canvas绘制坐标和线

    JavaScript使用canvas绘制坐标和线

    本文实例为大家分享了JavaScript使用canvas绘制坐标和线的具体代码,供大家参考,具体内容如下 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>在指定位置画多个点</title> <style> canvas{ border: 1px dashed gray; } &

  • javascript+HTML5 canvas绘制时钟功能示例

    javascript+HTML5 canvas绘制时钟功能示例

    本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net canvas绘制时钟</title> <style> div{text-align:cent

  • JavaScript利用canvas绘制流星雨效果

    目录 前言 需求分析 实现过程 1.绘制满天繁星 2.满天繁星闪起来 3.绘制流星 4.流星划过夜空 5.流星雨 6.merge视觉盛宴 前言 最近总是梦见一些小时候的故事,印象最深刻的就是夏天坐在屋顶上,看着满天的繁星,一颗,两颗,三颗...不由自主地开始了数星星的过程.不经意间,一颗流星划过夜间,虽然只是转瞬即逝,但它似乎比夜空中的其它繁星更吸引着我.听老人说,看见流星的时候许愿,愿望是可以实现的,此时早已把数星星抛之脑后,开始期待着下一颗流星的出现.但是那天晚上,流星再也没有出现,这也成了

  • JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例

    JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例

    本文实例讲述了JavaScript+html5 canvas绘制缤纷多彩的三角形效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML> <html> <head> <title>demo</title> <style type="text/css"> body { margin:0; padding:0; } #canvas { width:500px; heig

  • JavaScript html5 canvas绘制时钟效果

    本文实例讲述了JavaScript+html5 canvas绘制时钟效果.分享给大家供大家参考,具体如下: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0

  • JavaScript+html5 canvas绘制的小人效果

    JavaScript+html5 canvas绘制的小人效果

    本文实例讲述了JavaScript+html5 canvas绘制的小人效果.分享给大家供大家参考,具体如下: 运行效果截图如下: index.html代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <title>canvas中的缩放</tit

  • JavaScript+html5 canvas绘制渐变区域完整实例

    JavaScript+html5 canvas绘制渐变区域完整实例

    本文实例讲述了JavaScript+html5 canvas绘制渐变区域的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { border:3px solid gray; } </style> </head&

  • JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例

    JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例

    本文实例讲述了JavaScript+html5 canvas绘制的圆弧荡秋千效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> #canvas { margin:50px; border:5px solid gray; box-shadow:0p

  • JavaScript使用canvas绘制随机验证码

    JavaScript使用canvas绘制随机验证码

    本文实例为大家分享了使用canvas绘制随机验证码的具体代码,供大家参考,具体内容如下 理论基础: 掌握使用canvas绘制线条和圆形以及绘制文字 实现思路: 先构建一个画布,设置一定的宽高(在canvas中设置宽高和在style中设置是有区别的,建议直接在canvas标签中设置),封装一个生成随机数的方法,为线条和圆形的绘制设置随机的位置,既然是随机的,必然是有随机的区间,先获取画布的宽高,线条和圆的位置就是(0~画布的宽高区间)的随机位置,再定义一个随机字符,获取随机的索引值,即可生成随机的

  • javascript+HTML5 Canvas绘制转盘抽奖

    javascript+HTML5 Canvas绘制转盘抽奖

    之前做过的项目中,有需要抽奖转盘功能的.项目已经完工一段时间了,也没出现什么严重的bug,所以现在拎出来分享给大家. 功能需求 1.转盘要美观,转动效果流畅. 2.转盘上需要显示奖品图片,并且奖品是后台读取的照片和名字. 3.转动动画完成后要有相应提示. 4.获取的奖品具体算法在数据库里操作,前端只提供最后的效果展示. 知识要点 1.引用了一个jq插件:awardRotate,用来实现更智能化的转动(插件下载:http://www.jqcool.net/jquery-jqueryrotate.h

随机推荐