canvas实现图像布局填充功能

本文实例为大家分享了canvas图像布局填充的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>canvas-图像布局填充</title>
  <style>
    #canvas{
      border: 1px solid palevioletred;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="600px" height="600px">
  </canvas>
  <script>
    //获取到canvas元素
    var canvas = document.getElementById('canvas');
    //获取canvas中的画图环境
    var context = canvas.getContext('2d'); 

    //创建Image对象
    var img = new Image();
    //alert(img);
    //引入图片URL
    img.src = "./image/huiji.png";
    window.onload = function (){
      //创建填充规则 .createPattern(图像对象,'规则'); 第二参数：repeat，no-repeat，repeat-x,repeat-y;
       var pattern = context.createPattern(img,'no-repeat');
      //设置填充属性
      context.fillStyle = pattern;
      context.fillRect(10,10,canvas.width,canvas.height);
    }
  </script>
</body>
</html>

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

赞 (0)

相关推荐

  • canvas实现图像放大镜

    本文实例为大家分享了canvas实现图像放大镜的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas-放大镜</title> <style> body{ padding: 0px; margin: 0px; } #canvas{ border: 1p

  • js canvas实现简单的图像扩散效果

    本文实例为大家分享了canvas实现简单图像扩散的代码,供大家参考,具体内容如下 <!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="800" height="800" style="border:1px solid #c3c3c3;"> Your browser does not support the canv

  • canvas实现图像截取功能

    本文实例为大家分享了canvas图像截取的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas-图像截取</title> <style> canvas{ border: 1px dashed red; float: left; position: r

  • Android开发之图形图像与动画(一)Paint和Canvas类学习

    Android开发之图形图像与动画(一)Paint和Canvas类学习

    Paint类 *Paint类代表画笔,用来描述图形的颜色和风格,如线宽,颜色,透明度和填充效果等信息. *使用Paint类时,需要先创建该类的对象,可以通过该类的构造函数实现.通常情况的实现代码是: *Paintpaint=newPaint(); *创建完Paint对象后,可以通过该对象提供的方法对画笔的默认设置进行改变 Canvas *Canvas类代表画布,通过该类提供的构造方法,可以绘制各种图形. *通常情况下,要在Android中绘图,需要先创建一个继承自View类的视图,并且在该类中重

  • 使用canvas进行图像编辑的实例

    使用canvas进行图像编辑的实例

    前面的话 本文将分为几个小功能的形式来详细介绍canvas图像编辑 缩放 下面是一张分析图,假设默认情况下,图片和canvas宽高相同.图片的缩放(scale)范围为0.5到3,缩放时改变的是图片的大小和图片的坐标位置 W(宽) = canvas.width * scale H(高) = canvas.height * scale x坐标 = (W - canvas.width)/2; y坐标 = (H - canvas.height)/2; 因此,代码如下 <canvas id="dra

  • PHP实现将HTML5中Canvas图像保存到服务器的方法

    本文实例讲述了PHP实现将HTML5中Canvas图像保存到服务器的方法.分享给大家供大家参考.具体实现方法如下: 一.问题: 在几年前HTML5还没有流行的时候,我们的项目经理曾经向我提出这样一个需求:让项目评审专家们在评审结束时用笔在平板电脑上进行电子签名.这需要我们评审软件里提供这样一个功能:打开浏览器,登录,进入评审意见页,页面最下部有个方块区域,用户在这里用触摸笔进行签名,然后这个签名将会保持的服务器上. 这样的一个需求在当时是让我大费周折,但如今想起来,如果用html5的canvas

  • canvas实现图像布局填充功能

    本文实例为大家分享了canvas图像布局填充的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas-图像布局填充</title> <style> #canvas{ border: 1px solid palevioletred; } </sty

  • Android编程实现扭曲图像的绘制功能示例

    Android编程实现扭曲图像的绘制功能示例

    本文实例讲述了Android编程实现扭曲图像的绘制功能.分享给大家供大家参考,具体如下: 为了实现动画效果,使用drawBitmapMess方法对图像进行扭曲,使用定时器以100毫秒的频率按圆形轨迹扭曲图像. 扭曲的关键是生成verts数组.本例一开始会先生成verts数组的初始值:有一定水平和垂直间距的网点坐标.然后通过warp方法按一定的数学方法变化verts数组中的坐标.关键部分的代码如下: 定义基本变量:MyView是用于显示扭曲的图像的自定义view,angle是圆形轨迹的当前角度:

  • Android编程实现canvas绘制饼状统计图功能示例【自动适应条目数量与大小】

    Android编程实现canvas绘制饼状统计图功能示例【自动适应条目数量与大小】

    本文实例讲述了Android编程实现canvas绘制饼状统计图功能.分享给大家供大家参考,具体如下: 本例的目的是实现一个简单的饼状统计图,效果如下:    特点: 1.使用非常方便,可放在xml布局文件中,然后在代码中设置内容,即: PieChartView pieChartView = (PieChartView) findViewById(R.id.pie_chart); PieChartView.PieItemBean[] items = new PieChartView.PieItem

  • Android编程实现canvas绘制柱状统计图功能【自动计算宽高及分度值、可左右滑动】

    Android编程实现canvas绘制柱状统计图功能【自动计算宽高及分度值、可左右滑动】

    本文实例讲述了Android编程实现canvas绘制柱状统计图功能.分享给大家供大家参考,具体如下: 这里实现了一个简单的柱状统计图,如下:   特点: 1.根据数据源自动计算每个条目的高度.宽度.间距,自动计算分度值. 2.当条目数较多时,可左右滑动查看全部内容,图形.文字同步滑动,并且松手后会渐渐的停下来(而不是立刻停下来). 代码: (1)核心代码:BarChartView.Java package com.sina.appbarchart; import android.app.Acti

  • 微信小程序利用canvas 绘制幸运大转盘功能

    小程序对 canvas api 跟h5的不太一致 ,所以这个搞的比较久,不多说,先贴代码 Page({ /** * 页面的初始数据 */ data: { awardsConfig: {}, restaraunts: [], //大转盘奖品信息 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var self = this; wx.getSystemInfo({ //获取系统信息成功,将系统窗口的宽高赋给页面的宽高 success:

  • Python使用OpenCV对图像进行缩放功能

    Python使用OpenCV对图像进行缩放功能

    OpenCV:图片缩放和图像金字塔 对图像进行缩放的最简单方法当然是调用resize函数啦! resize函数可以将源图像精确地转化为指定尺寸的目标图像. 要缩小图像,一般推荐使用CV_INETR_AREA来插值:若要放大图像,推荐使用CV_INTER_LINEAR. 现在说说调用方式 第一种,规定好你要图片的尺寸,就是你填入你要的图片的长和高. #include<opencv2\opencv.hpp> #include<opencv2\highgui\highgui.hpp> u

  • SpringBoot Mybatis Plus公共字段自动填充功能

    一.应用场景 平时在建对象表的时候都会有最后修改时间,最后修改人这两个字段,对于这些大部分表都有的字段,每次在新增和修改的时候都要考虑到这几个字段有没有传进去,很麻烦.mybatisPlus有一个很好的解决方案.也就是公共字段自动填充的功能.一般满足下面条件的字段就可以使用此功能: 这个字段是大部分表都会有的. 这个字段的值是固定的,或则字段值是可以在后台动态获取的. 常用的就是last_update_time,last_update_name这两个字段. 二.配置MybatisPlus 导包:

  • js canvas实现放大镜查看图片功能

    本文实例为大家分享了canvas实现放大镜查看图片功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body style="background: black;"> <c

  • jQuery 禁止表单用户名、密码自动填充功能

    Html登录表单经常被自动填充,有的甚至用户从来没有登录过的网站也会有自动填充,甚是让人讨厌. Mozilla developer documentation 建议使用表单设置属性 tautocomplete="off" 来阻止浏览器从cache获取数据填充登录表单. <input type="text" name="foo" autocomplete="off" /> 但是这种方案不兼容某些Chrome.Fire

随机推荐