问题：

用图像而不是颜色填充画布区域

贲宜春

2023-03-14

使用下面的代码，我可以在加载到画布中的图像上绘制一个区域，并用一些颜色填充绘制的区域。

现在，我需要用图像而不是颜色填充绘制区域。比如：

帆布fillStyle='url（myimage.jpg）'；

而不是

帆布fillStyle='#123456'//填充颜色示例

HTML:

 <body>
  <div id="main" class="container">
    <h1>Image Maps Canvas Drawing</h1>
    <form>
    <div class="row">
      <div class="span6">
      <textarea rows=3 name="coords1" class="canvas-area input-xxlarge" disabled 
        placeholder="Shape Coordinates" 
        data-image-url="img1.jpg"></textarea>
      </div>
      <div class="span6">

    </div>
    </form>
    </div>
    <script language="javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script language="javascript" src="jquery.canvasAreaDraw.min.js"></script>
  </body>

jquery。拉票。min.js

(function (e) {
    e.fn.canvasAreaDraw = function (e) {
        this.each(function (n, r) {
            t.apply(r, [n, r, e])
        })
    };

    var t = function (t, r, i) {
        var s, o, u, a, f, l, c, h, p, d, v, m, g, y, b; u = e.extend({
            imageUrl: e(this).attr("data-image-url")
        }, i), e(this).val().length ? s = e(this).val().split(",").map(function (e) {
            return parseInt(e, 10)
        }) : s = [], a = e('<button type="button" class="btn"><i class="icon-trash"></i>Clear</button>'),
f = e("<canvas id='your_canvas'>"), l = f[0].getContext("2d"), c = new Image, m = function () {
    f.attr("height", c.height).attr("width", c.width), h()
}, e(c).load(m), c.src = u.imageUrl, c.loaded && m(), f.css(
{ background: "url(" + c.src + ")" }), e(document).ready(function () {
    e(r).after("<br>", f, "<br>", a), a.click(g), f.bind("mousedown", p), f.bind("contextmenu", y), f.bind("mouseup", d)
}), g = function () {
    s = [], h()
}, v = function (t) {
    t.offsetX || (t.offsetX = t.pageX - e(t.target).offset().left, t.offsetY = t.pageY - e(t.target).offset().top), s[o] = Math.round(t.offsetX), s[o + 1] = Math.round(t.offsetY), h()
},
d = function () {
    e(this).unbind("mousemove"), b(), o = null
}, y = function (t) {
    t.preventDefault(), t.offsetX || (t.offsetX = t.pageX - e(t.target).offset().left, t.offsetY = t.pageY - e(t.target).offset().top);

    var n = t.offsetX, r = t.offsetY;
    for (var i = 0; i < s.length; i += 2) {
        dis = Math.sqrt(Math.pow(n - s[i], 2) + Math.pow(r - s[i + 1], 2));
        if (dis < 6)
            return s.splice(i, 2), h(), b(), !1
    }
    return !1
}, p = function (t) {
    var r, i, u, a, f = s.length;
    if (t.which === 3)
        return !1;
    t.preventDefault(), t.offsetX || (t.offsetX = t.pageX - e(t.target).offset().left, t.offsetY = t.pageY - e(t.target).offset().top), r = t.offsetX, i = t.offsetY;
    for (var l = 0; l < s.length; l += 2) {
        u = Math.sqrt(Math.pow(r - s[l], 2) + Math.pow(i - s[l + 1], 2));
        if (u < 6) return o = l, e(this).bind("mousemove", v), !1
    }
    for (var l = 0; l < s.length; l += 2)
        l > 1 && (a = n(r, i, s[l], s[l + 1], s[l - 2], s[l - 1], !0), a < 6 && (f = l));
    return console.log(s), s.splice(f, 0, Math.round(r), Math.round(i)), o = f, e(this).bind("mousemove", v), h(), b(), !1
}, h = function () {
    l.canvas.width = l.canvas.width;
    if (s.length < 2)
        return !1;
    l.globalCompositeOperation = "destination-over", l.fillStyle = "rgb(255,255,255)", l.strokeStyle = "rgb(255,20,20)", l.lineWidth = 1, l.beginPath(),
l.moveTo(s[0], s[1]);
    for (var e = 0; e < s.length; e += 2)
        l.fillRect(s[e] - 2, s[e + 1] - 2, 4, 4), l.strokeRect(s[e] - 2, s[e + 1] - 2, 4, 4), s.length > 2 && e > 1 && l.lineTo(s[e], s[e + 1]); l.closePath(), l.fillStyle = "rgba(255,0,0,0.3)", l.fill(), l.stroke(), b()
}, b = function () {
    e(r).val(s.join(","))
} 
}; e(document).ready(function () {
    e(".canvas-area[data-image-url]").canvasAreaDraw()
});
var n = function (e, t, n, r, i, s, o) {
    function u(e, t, n, r) {
        return Math.sqrt((e -= n) * e + (t -= r) * t)
    }
    if (o && !(o = function (e, t, n, r, i, s) {
        if (!(i - n)) return { x: n, y: t };
        if (!(s - r))
            return { x: e, y: r };
        var o, u = -1 / ((s - r) / (i - n));
        return {
            x: o = (i * (e * u - t + r) + n * (e * -u + t - s)) / (u * (i - n) + r - s), y: u * o - u * e + t
        }
    }
(e, t, n, r, i, s), o.x >= Math.min(n, i) && o.x <= Math.max(n, i) && o.y >= Math.min(r, s) && o.y <= Math.max(r, s))) {
        var a = u(e, t, n, r), f = u(e, t, i, s);
        return a > f ? f : a
    }
    var l = r - s, c = i - n, h = n * s - r * i;
return Math.abs(l*e+c*t+h)/Math.sqrt(l*l+c*c)}})(jQuery);

共有1个答案

卫俊誉

2023-03-14

比如：

$(function() {
  var canvas = $('#canvas')[0];
  var ctx    = canvas.getContext('2d');
  var src    = "http://www.mysite.com/avatar/e55?s=128&d=identicon&r=PG";
  var w      = canvas.width  = 400;
  var h      = canvas.height = 400;
  var img    = new Image();
  img.src    = src;
  $(img).load(function() {
    var pattern = ctx.createPattern(img, 'repeat');
    ctx.fillStyle = pattern;
    ctx.fillRect(0, 0, w, h);
  });
});

类似资料：

用颜色填充安全区域

我想用一种颜色填充剩余的空白，但我找不到任何方法来做到这一点，我是ios开发的初学者我的应用的照片：
如何用特定的颜色填充整个画布？

如何填充整个HTML5
填充颜色

艺术离不开色彩，今天咱们来介绍一下填充颜色，体会一下色彩的魅力。填充颜色主要分为两种：基本颜色渐变颜色（又分为线性渐变与径向渐变）我们一个个来看。填充基本颜色 Canvas fillStyle属性用来设置画布上形状的基本颜色和填充。fillStyle使用简单的颜色名称。这看起来非常简单，例如: context.fillStyle = "red"; 下面是出自 HTML4 规范的可用颜色
Android不规则图像填充颜色小游戏

本文向大家介绍Android不规则图像填充颜色小游戏，包括了Android不规则图像填充颜色小游戏的使用技巧和注意事项，需要的朋友参考一下一、概述近期群里偶然看到一哥们在群里聊不规则图像填充什么四联通、八联通什么的，就本身好学务实的态度去查阅了相关资料。对于这类着色的资料，最好的就是去搜索些相关app，根据我的观察呢，不规则图像填充在着色游戏里面应用居多，不过大致可以分为两种：基于层的的填充
更改图像的特定区域并在该区域填充颜色

问题内容：编辑Png图像例如，更改特定区域并在该区域填充颜色。我想更改仅图像选择区域的颜色。就像第一个用户选择一种颜色，然后他选择一个图像一样，之后他可以用所选颜色更改图像颜色的特定区域。之后，他也可以保存该图像，这可能吗？像Color公司的网站使用这种东西。像下面的URL https://www.sherwin- williams.com/visualizer#/active 问题答案：
用作背景图像时修改SVG填充颜色

问题内容：将SVG输出直接与页面代码内联放置，我能够像这样简单地用CSS修改填充颜色：这很好用，但是我正在寻找一种方法，当它用作Background-IMAGE时，修改SVG的“填充”属性。现在如何更改颜色？可能吗作为参考，这是我的外部SVG文件的内容：问题答案：一种方法是从某种服务器端机制为svg提供服务。只需创建一个资源服务器端，即可根据GET参数输出svg，然后将其提供给某个网址

用图像而不是颜色填充画布区域

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档