canvas绘图

最新推荐文章于 2023-07-22 23:27:17 发布
置顶 最新推荐文章于 2023-07-22 23:27:17 发布
阅读量420 收藏 2
点赞数 2
分类专栏： JavaScript学习记录 CSS 文章标签： js css html canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liudef06/article/details/121394889
版权

H5制作的静态页面绘图工具
页面效果
canvas元素制作
上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            font-size: 1px;
            margin: 10px;
            border: 1px solid salmon;
            /* width: 1500px;
            height: 600px; */
            border-radius: 10px;
            cursor: none !important;
        }
        input[type='button'] {
            padding: 0.5em 2em;
            font-size: 1.2em;
            margin: 0px 10px;
            background-color: rgb(214, 214, 214);
            border: none;
            border-radius: 2em;
            color: #fff;
            cursor: pointer;
        }

        input[type='button']:hover {
            background-color: rgb(179, 179, 179);

        }

        #tools svg {
            height: 50px;
            width: 100px;

        }

        ul {
            list-style: none;
            padding: 5px;
            margin: 5px;
        }

        ul li {
            cursor: pointer;
            float: left;
            padding: 0px 5px;
        }

        li div {
            width: 50px;
            height: 50px;
            background-color: aqua;
            border-radius: 10px;
            border: rgb(255, 255, 255) 5px solid;
        }

        .color:nth-child(3) div {
            background-color: red;
        }

        .color:nth-child(4) div {
            background-color: blue;
        }

        .color:nth-child(5) div {
            background-color: yellow;
        }

        .custom div {
            background-color: black;
        }

        li input {
            height: 40px;
        }

        #select {
            z-index: 3;
            position: absolute;
            cursor: none !important;
        }

        .color div:hover {
            border: rgb(238, 255, 164) 5px solid;
        }

        .lineWidth input {
            border: none;
            outline: none;
        }

        .lineWidth {

            padding: 2px;
            padding-top: 20px;
            padding-left: 50px;
        }

        #lineWidth svg {
            width: 20px;
        }

        #lineWidth input:focus {
            background-color: rgb(169, 204, 255);
            border-radius: 16px;
        }
    </style>
</head>

<body>
    <input type="button" value="清空" id="clear">
    <input type="button" value="获取数据" id="getdata">
    <input type="button" value="导出图片" id="getimg">
    <!-- <input type="button" value="切换" id="p" > -->
    <div id="tools">
        <ul>
            <li class="pan"> <svg t="1629424055171" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="3352" width="200" height="200">
                    <path
                        d="M751.97 112.3l-1.88-1.16 0.36-0.08c-52.86-32.34-121.88-16.25-155.01 36.09l-55.57 88.15-8.1 12.18L244.18 703.8l-1.28 2.08c-1.16 1.88-1.88 3.95-2.08 6.15L221.9 928.52c-0.28 3.19 0.52 6.31 2.32 8.94 4.27 6.27 12.81 7.86 19.08 3.63l186.55-110.26c2.08-1.2 3.75-2.95 4.95-5.03l1-1.56 287.39-456.3 43.03-68.26 20.2-32.02c32.86-52.49 17.53-121.67-34.45-155.36zM547.94 273.62l60.88 38.4-252.58 400.56c-10.3-24.27-34.57-39.6-60.92-38.44l252.62-400.52z m-296.18 631.1l3.87-45.11 4.71 0.88a51.346 51.346 0 0 1 27.03 17.09c1 1.24 2 2.52 2.91 3.87l-38.52 23.27z m161.56-95.73l-99.24 58.56a78.611 78.611 0 0 0-47.07-33.65c-2.99-0.76-5.99-1.32-9.02-1.72l10.02-114.85a36.064 36.064 0 0 1 22.75-15.53c19.48-4.07 38.6 8.38 42.72 27.9 2 9.3 0.32 18.96-4.67 27.07-0.36 0.48-0.68 1-0.92 1.52-3.31 6.35-0.88 14.21 5.51 17.53 0.28 0.16 0.6 0.36 0.88 0.52 6.47 3.47 14.49 1.04 17.96-5.39a35.454 35.454 0 0 1 22.2-15.53c8.94-2 18.28-0.48 26.19 4.15 17.12 10.14 22.83 32.3 12.69 49.42z m27.35-43.47c-10.42-24.43-34.93-39.72-61.44-38.32l252.58-400.53 61.44 38.32-252.58 400.53z m283.24-449.87l-16.61 26.27-145.03-91.5 30.86-48.9 145.23 91.86-14.45 22.27z m39.32-62.63l-10.46 16.73-145.03-91.38L618 161.92c25.27-39.96 78.05-52.06 118.21-27.07 39.95 25.27 52.05 78.05 27.02 118.17z"
                        p-id="3353"></path>
                    <path
                        d="M290.29 881.45l-38.52 23.27 3.87-45.11 4.71 0.88a51.346 51.346 0 0 1 27.03 17.09c0.99 1.24 1.99 2.51 2.91 3.87z"
                        fill="#B4B6BC" p-id="3354"></path>
                    <path
                        d="M413.19 809.39l-99.55 58.04a78.61 78.61 0 0 0-46.89-33.9c-2.99-0.77-5.98-1.35-9.01-1.76l10.62-114.8a36.02 36.02 0 0 1 22.84-15.41c19.5-3.97 38.56 8.59 42.57 28.13 1.95 9.31 0.22 18.96-4.81 27.04-0.36 0.48-0.68 0.99-0.93 1.51-3.35 6.33-0.95 14.21 5.42 17.55 0.28 0.16 0.6 0.36 0.88 0.52 6.45 3.51 14.49 1.11 17.99-5.29a35.375 35.375 0 0 1 22.28-15.41c8.95-1.95 18.29-0.38 26.17 4.29 17.06 10.23 22.65 32.41 12.42 49.49z"
                        fill="#FFEA8F" p-id="3355"></path>
                    <path
                        d="M693.25 364.99L440.67 765.52c-10.42-24.43-34.93-39.72-61.44-38.32l252.58-400.53 61.44 38.32z"
                        fill="#ED8D22" p-id="3356"></path>
                    <path d="M608.82 312.02L356.24 712.58c-10.3-24.27-34.57-39.6-60.92-38.44l252.62-400.53 60.88 38.41z"
                        fill="#FFEA8F" p-id="3357"></path>
                    <path d="M738.36 293.38l-14.45 22.27-16.61 26.27-145.03-91.5 30.86-48.9z" fill="#80D8FF"
                        p-id="3358"></path>
                    <path
                        d="M763.23 253.02l-10.46 16.73-145.03-91.38L618 161.92c25.27-39.96 78.05-52.06 118.21-27.07 39.95 25.27 52.05 78.05 27.02 118.17z"
                        fill="#FD5E7A" p-id="3359"></path>
                </svg></li>
            <li class="eraser"> <svg t="1629424380341" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="5518" width="200" height="200">
                    <path
                        d="M1007.9488 353.6128L753.408 52.224c-24.8832-32.4864-69.6576-37.248-100.0192-10.6496L44.4928 575.2832c-30.3616 26.5984-34.816 74.5216-9.9584 106.9824l244.3008 305.4848c24.8832 32.4864 69.6576 37.248 100.0192 10.6496l619.1104-537.8048c30.4128-26.5984 34.8672-74.496 9.984-106.9824z"
                        fill="#FBDBBA" p-id="5519"></path>
                    <path
                        d="M137.216 491.52s-48.9728 43.1872-92.16 81.92c-9.1392 14.464-22.2464 30.336-24.576 47.104-3.4816 25.216 4.096 49.152 4.096 49.152l22.528 28.672L198.656 563.2l-61.44-71.68zM741.376 38.912c-8.1152-5.5808-27.136-21.0176-47.104-18.432-23.2192 2.9952-47.104 24.576-47.104 24.576l-78.5152 67.4048 57.6256 67.84L763.904 65.536s-7.5776-10.0864-22.528-26.624z"
                        fill="#F5D69E" p-id="5520"></path>
                    <path d="M571.392 110.592L135.168 493.568l350.208 415.744 430.8992-378.24z" fill="#ABB2F7"
                        p-id="5521"></path>
                    <path d="M571.392 110.592L135.168 493.568 198.656 563.2 626.688 180.224z" fill="#8A91EF"
                        p-id="5522"></path>
                    <path
                        d="M453.4784 285.7472c-6.784-9.2672-18.7648-11.3664-26.752-4.6848s-8.96 19.6096-2.176 28.9024c6.784 9.2672 18.7648 11.3664 26.752 4.6848 7.9872-6.7072 8.96-19.6352 2.176-28.9024zM414.4384 315.7248c-6.1184-8.3456-16.128-10.8544-22.4-5.6064l-98.304 82.3296c-6.272 5.248-6.4 16.256-0.2816 24.6016s16.128 10.8544 22.4 5.6064l98.304-82.3296c6.272-5.248 6.4-16.256 0.2816-24.6016z"
                        fill="#FFFFFF" p-id="5523"></path>
                </svg></li>
            <li class="color" color='red'>
                <div></div>
            </li>
            <li class="color" color='blue'>
                <div></div>
            </li>
            <li class="color" color='yellow'>
                <div></div>
            </li>

            <li class="custom_input"><input type="text" value="black"></li>
            <li class="custom color" color='black'>
                <div></div>
            </li>
            <li class="pan lineWidth" id="lineWidth" color='yellow'>
                <span id="panadd"> <svg height='20px' style="font-size: 20px; height:20px" t="1629706997081"
                        class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                        p-id="1927">
                        <path d="M248.888889 497.777778l526.222222 0 0 28.444444-526.222222 0 0-28.444444Z" p-id="1928">
                        </path>
                        <path d="M497.777778 248.888889l28.444444 0 0 526.222222-28.444444 0 0-526.222222Z" p-id="1929">
                        </path>
                    </svg>
                </span>
                <input type="text" value="1" id="panlineWidth"
                    style="height: 20px;width: 20px;text-align: center; font-size: 16px;">
                <!-- <span  >1</span> -->
                <span id="panreduce">
                    <svg height='20px' style="font-size: 20px; height:20px" t="1629707070990" class="icon"
                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2872">
                        <path d="M204.8 477.867h614.4v68.266H204.8z" fill="#8A8A8A" p-id="2873"></path>
                    </svg>
                </span>
            </li>
        </ul>
    </div>
    <canvas id="drawingBoard" width="1400px" height="600px"></canvas>
    <div id="select"> </div>
    <script>
        // document.style.cursor = 'pointer'
        var i = 0;
        var ld = false;
        var panadd = document.getElementById('panadd'), panreduce = document.getElementById('panreduce'), panlineWidth = document.getElementById('panlineWidth');
        var drawingBoard = document.getElementById('drawingBoard');
        var ctx = drawingBoard.getContext("2d");
        var y = drawingBoard.offsetTop;
        var x = drawingBoard.offsetLeft;
        var clear = document.getElementById('clear');
        var custom = document.getElementsByClassName('custom')[0];
        var colors = document.getElementsByClassName('color')
        ctx.lineWidth = 1;
        var zt = 'pan';
        var drawingBoardZt = false;
        var select = document.getElementById('select');
        var panColor = 'black';
        var getdata = document.getElementById('getdata');
        var getimg = document.getElementById('getimg');
        var h = 0, l = 0;
        var lineWidth = 1;
        for (var c = 0; c < colors.length; c++) {
            colors[c].onclick = function () {
                console.log(this.getAttribute('color'))
                panColor = this.getAttribute('color');
            }
        }
        document.getElementsByClassName('pan')[0].onclick = function () {
            drawingBoardZt = true;
            setPan(this, 'pan', event.clientX, event.clientY);
        }

        document.getElementsByClassName('eraser')[0].onclick = function () {
            // console.log(event.clientX + ',' + event.clientY)
            drawingBoardZt = true;
            setPan(this, 'eraser', event.clientX, event.clientY);
        }
        document.getElementsByClassName('custom_input')[0].children[0].onkeyup = function () {
            custom.setAttribute('color', this.value);
            custom.children[0].style.background = this.value;
            panColor = this.value
        }
        clear.onclick = function () {
            drawingBoard.height = drawingBoard.height
        }
        getdata.onclick = function () {
            console.log(ctx.getImageData(0, 0, 500, 500))
        }
        getimg.onclick = function () {
            var img = convertCanvasToImage(drawingBoard);
            var alink = document.createElement("a");
            alink.href = img.getAttribute('src');
            alink.download = "canvas.png";
            alink.click();
        }

        function convertCanvasToImage(canvas) {
            var image = new Image();
            image.src = canvas.toDataURL("image/png");
            return image;
        }
        function setPan(obj, ztl, x, y) {
            zt = ztl;
            // console.log(zt)
            select.innerHTML = obj.innerHTML; select.children[0].style.height = '30px'; select.children[0].style.width = '30px';
            select.style.left = x + 'px';
            select.style.top = y - 30 + 'px';
        }
        function draw(ctx, x, y) {
            i++;
            console.log(ctx.lineWidth);
            ctx.lineTo(x + 4, y - 4);
            ctx.lineWidth = lineWidth;
            ctx.stroke();
            ctx.beginPath();
            ctx.strokeStyle = panColor;
            ctx.moveTo(x + 4, y - 4);
        }
        function erase(ctx, x, y) {
            ctx.clearRect(x, y - 14, 14, 14);
        }
        document.onmousemove = function () {
            // console.log(zt)
            if (!ld) {
                return
            }
            h = getScrollTop();
            l = getScrollLeft();
            switch (zt) {
                case 'pan':
                    draw(ctx, event.clientX - x + l, event.clientY - y + h);
                    break;
                case 'eraser':
                    erase(ctx, event.clientX - x + l, event.clientY - y + h);
                    break;
            }
            select.style.left = event.clientX + l + 'px';
            select.style.top = event.clientY - 30 + h + 'px';
        }
        drawingBoard.onmousedown = function () {
            if (!drawingBoardZt) {
                return
            }
            document.onmousemove();
            select.removeAttribute('hidden');
            select.style.left = event.clientX + getScrollLeft() + 'px';
            select.style.top = event.clientY - 30 + getScrollTop() + 'px';
            ctx.beginPath();
            ctx.strokeStyle = panColor;
            ld = true
        }
        document.onmouseup = function () {
            ctx.stroke();
            select.setAttribute('hidden', 'hidden')
            ld = false;
        }

        function getScrollTop() {//浏览器滚动条高度
            scrollTop = 0;
            if (document.body) {
                scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            }
            return scrollTop;
        }
        function getScrollLeft() {//浏览器滚动条左边距离
            scrollLeft = 0;
            if (document.body) {
                scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
            }
            return scrollLeft;
        }
        panreduce.onclick = function () {
            if (lineWidth <= 1) {
                return;
            }
            lineWidth--;
            panlineWidth.value = lineWidth;
        }
        panadd.onclick = function () {
            lineWidth++;
            panlineWidth.value = lineWidth;
        }
        panlineWidth.onkeyup = function () {
            lineWidth = this.value;
        }
    </script>
</body>

</html>
Liudef06
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 canvas绘图
粥要熬。
09-09 492
canvas绘制图形canvas元素的基础知识在页面上放置一个canvas元素，就相当于在页面放置了一块画布，可以在其中描绘图形。事实上，canvas元素只是一个无色透明的区域，需要利用JavaScript编写在其中进行绘画的脚本。在页面放置canvas元素首先要指定的是ID、width、height三个属性<canvas id="canvas" width="400" height="300" /
canvas绘图任意矩形、多边形
10-19
<title>canvas绘图 canvas { border: 1px solid black; } <canvas id="myCanvas" width="800" height="600"></canvas> <script src="index.js"></script> ``` 接着，在`index.js`中，我们初始化...
canvas 详解 —— 绘制篇
qq_42880714的博客
07-22 8647
canvas 详解 —— 绘制篇
canvas画布
web_only_的博客
04-21 1198
canvas标签 <canvas></canvas> 接下来使用支持H5的浏览器打开该页面，将会看到如下内容： canvas画布标签兼容处理： 如果浏览器不兼容，最好进行友好提示，提示内容只有在浏览器不支持时才显示。 <canvas>您的浏览器不支持canvas标签</canvas> 结果分析： 由上述结果可以分析出，在H5中，canvas标...
HTML5之Canvas绘图——使用Canvas绘制图形
csdn_chenli
06-16 1022
HTML5之Canvas绘图——使用Canvas绘制图形的基本教程 HTML5火的正热，最近有个想法也是要用到HTML的相关功能，所以也要好好学习一把。 好好看了一下Canvas的功能，感觉HTML5在客户端交互的功能性越来越强了，今天看了一下Canvas绘图，下边是几个实例，记下以备后用。 Canvas绘制一个加载的动画图片
Canvas绘制
不同场景下的水平居中
06-15 2964
Canvas 绘制基本用法：绘制文本、图片、圆形等
基于C#开发的图像绘制、Canvas绘图及图片处理应用开发
05-24
总之，"基于C#开发的图像绘制、Canvas绘图及图片处理应用开发"这个主题涵盖了C#编程中一个非常实用的领域，不仅涉及到基本的图形绘制，还包括了高级的图像处理技巧。掌握这些技能，开发者可以创建出各种富于创意的...
canvas 绘图时位置偏离的问题解决
11-19
在描述中提到，使用canvas绘图时，指定的div大小一定不要超过该div所能获得的最大范围。这里的“最大范围”是指浏览器为元素留出的实际空间。如果div设置了较大的外边距（margin），或者有其他元素占据了空间，那么...
详解canvas绘图时遇到的跨域问题
09-27
总结来说，解决Canvas绘图时的跨域问题的关键在于： 1. 在`<img>`标签上设置`crossorigin`属性为`anonymous`，开启CORS请求。 2. 服务器端需要在响应头中设置`Access-Control-Allow-Origin`字段，允许指定的源进行...
基于HTML5 Canvas绘图技术应用.pdf
最新发布
01-03
Canvas绘图技术具有以下几个优势： 1. 像素级别的位图绘图技术：Canvas具备像素级别的位图绘图技术，可以通过浏览器脚本语言（通常是JavaScript）调用自带的函数（方法）进行图形绘制，实现对图像的像素级别的操作...
HTML5_Canvas编写的动态画图程序
04-13
该代码利用HTML5中的Canvas控件编写的画图页面，可以选择直线，圆和矩形三种图形，任意选择颜色进行画图。
页面截图与绘制【Canvas】（我的成长之路No.10）
nulixueweb的博客
04-07 296
主要业务需求为，对页面流域信息进行图片生成，之前考虑用过html2.canvas进行实现，后发现此方式只会截图可见区域，显而易见这并不符合我所需要的功能需求，故用d3的json文件处理，结合canvas直接进行数据绘制。此方式用于获取json文件处理，后期需要根据需求在json文件时进行筛选过滤，或者用其他方式进行处理获取。（目前是用此方式进行获取，后期需要整体替换成其他方式，网上获取json的方式有很多，这里就不说了）这里是将数据的坐标点转换为屏幕坐标，绘制时的坐标。这里主要是对数据进行转换，和预处理。
canvas做静态图片波动
晚星的博客
08-04 356
使用前端技术实现静态图片局部流动效果
html画图表canvas,怎样用JavaScript和HTML5 Canvas绘制图表
weixin_36484714的博客
06-04 470
在这篇教程中，我将展示用JavaScript和canvas作为手段，在饼状图和圆环图上显示数字信息。与从零到一创建图表相比，其实有更简便的方式，例如用CodeCanyon上的这个图表库但是如果你想知道库背后的原理，往下读。什么是饼状图？图表是用来图形化展示数据的工具。 饼状图将数据用切割成份的圆来展示。 每份的大小代表了数据值所代表的比例大小。什么是圆环图？简而言之，圆环图是饼状图的一个变种。 不...
canvas进阶——实现静态图像的变形并合成动态效果
weixin_34343308的博客
01-19 700
写在最前 在之前的这篇bezierMaker.js——N阶贝塞尔曲线生成器的文章中我们提到了对于高阶贝塞尔公式的绘制与生成。不过更多的童鞋看到后可能会不知道其使用场景是什么。故作者本次分享一下基于bezierMaker.js实现的将静态图片按照自定义曲线轨迹扭曲图片并合称为动态效果。 欢迎关注我的博客，不定期更新中—— 效果预览 之前的描...
antv G6 canvas 画布上gif显示成静态图片的问题
weixin_42640143的博客
08-02 705
问题描述：antv G6 canvas 画布上gif显示成静态图片的问题 原因： html5画布的逐帧显示的 gif 是有由一帧一帧组成的 所以显示的是第一帧静态图片 解决： 自定义节点 运用g6 utils里的tranform 把静态图片变成动态的图片 但是有个问题 一个动画和下一个动画之间有停顿 ...
canvas制作网页贪吃蛇学习与扩展
weixin_43933701的博客
12-07 542
文章目录项目来源：uniquemo学习笔记在html中同时引入多个js文件顺序问题检测键盘点击事件：key()简化名称表达：replace()计时器：setInterval()新增功能触壁结束重新开始优化禁止回退&向前加速 项目来源：uniquemo 已果断star 学习笔记 在html中同时引入多个js文件顺序问题 由于html为由上至下顺序执行，若parent.js引用了child.js，需将child.js先引入html文件中，以便parent.js使用。 通常child.js为构造函数，p
html画布设计,10个会让你惊叹不已的HTML5画布(canvas)技术应用
weixin_42347634的博客
06-05 536
随着老式浏览器(IE6)的逐渐淘汰，现代浏览器(火狐浏览器，谷歌浏览器，Opera，Safari)走向主流，越来越多的HTML5和CSS3技术开始出现在各种网站上。这些最新的网页技术究竟能给我们今后的浏览带来什么样的改变？下面的这是10个HTML5画布(canvas)技术效果演示一定会让你惊叹不已。当然，也许你也会认为，过去在老式浏览器中用flash技术也能实现这样的效果。但是，下面的这些演示只使...
写一个静态的雪花【canvas】
weixin_45044349的博客
06-15 128
利用角度、坐标轴画雪花 <style> * { padding: 0; margin: 0; } html, body { /* 隐藏滚动条 */ overflow: hidden; } canvas { background: #000; } &lt..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值