Canvas篇

Canvas API 提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。
可用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

Canvas 的默认大小为300像素×150像素(宽×高,像素的单位是px)
<canvas> 看起来和 <img> 元素很相像,唯一的不同就是它并没有 src 和 alt 属性。实际上,<canvas> 标签只有两个自带属性— widthheight

<canvas id="canvas" width="300" height="300">
  Sorry, your browser doesn't support the &lt;canvas&gt; 
</canvas>

clearRect(x, y, width, height)

注:toDataURL第二个参数 可用于图片像素压缩

canvas.toDataURL(type, encoderOptions)

 1. type 可选
 图片格式,默认为 image/png
 2. encoderOptions 可选
 在指定图片格式为 image/jpeg或image/webp的情况下,可以从 01 的区间内选择图片的质量。如果超出取值范围,将会使用默认值0.92。其他参数会被忽略。

注:drawImage改变原有图片宽高 可用于图片压缩

ctx.drawImage(image, dx, dy)
ctx.drawImage(image, dx, dy, dWidth, dHeight)
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

1.sx可选
  需要绘制到目标上下文中的,image的矩形(裁剪)选择框的左上角 X 轴坐标。
2.sy可选
  需要绘制到目标上下文中的,image的矩形(裁剪)选择框的左上角 Y 轴坐标。
3.sWidth可选
  需要绘制到目标上下文中的,image的矩形(裁剪)选择框的宽度。如果不说明,整个矩形(裁剪)从坐标的sx和sy开始,到image的右下角结束。
4.sHeight可选
需要绘制到目标上下文中的,image的矩形(裁剪)选择框的高度。
5.dx
  image的左上角在目标canvas上 X 轴坐标。
6.dy
  image的左上角在目标canvas上 Y 轴坐标。
7.dWidth可选
  image在目标canvas上绘制的宽度。 允许对绘制的image进行缩放。 如果不说明, 在绘制时image宽度不会缩放。
8.dHeight可选
  image在目标canvas上绘制的高度。 允许对绘制的image进行缩放。 如果不说明, 在绘制时image高度不会缩放。

<canvas> 元素有一个叫做 getContext()的方法,这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数。

示例1:将图像文件转换为base64字符串

var image = new Image()
image.src = url // 此处url为要转base64的图片地址
let data = '' // 用于存储最终转码过的图片

// onload为当前图片加载完成之后在对其渲染
image.onload = () => {
	var canvas = document.createElement('canvas') // 创建一个canvas元素
	var cxt = canvas.getContext('2d') // context相当于画笔,里面有各种可以进行绘图的API

	// 此处可以改变图片宽高来达到压缩图片的效果(例如:image.width/2;image.height/2)
   canvas.width = image.width
   canvas.height = image.height

   cxt.clearRect(0, 0,  image.width, image.height)
   cxt.drawImage(image, 0, 0)
   
   // toDataURL第二个参数值越小,所绘制出的图像越模糊
   data = canvas.toDataURL('image/*', 0.7)
}

示例2:绘制三角形

function draw() {
  var canvas = document.getElementById('tutorial')
  // 使用canvas.getContext来判断当前浏览器是否支持Canvas
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d')

    ctx.beginPath()
    ctx.moveTo(75, 50)
    ctx.lineTo(100, 75)
    ctx.lineTo(100, 25)
    ctx.fill()
  }
}

// 使用方法
<body onload="draw();">
	<canvas id="tutorial" width="150" height="150"></canvas>
</body>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
校园悬赏任务平台对字典管理、论坛管理、任务资讯任务资讯公告管理、接取用户管理、任务管理、任务咨询管理、任务收藏管理、任务评价管理、任务订单管理、发布用户管理、管理员管理等进行集中化处理。经过前面自己查阅的网络知识,加上自己在学校课堂上学习的知识,决定开发系统选择小程序模式这种高效率的模式完成系统功能开发。这种模式让操作员基于浏览器的方式进行网站访问,采用的主流的Java语言这种面向对象的语言进行校园悬赏任务平台程序的开发,在数据库的选择上面,选择功能强大的Mysql数据库进行数据的存放操作。校园悬赏任务平台的开发让用户查看任务信息变得容易,让管理员高效管理任务信息。 校园悬赏任务平台具有管理员角色,用户角色,这几个操作权限。 校园悬赏任务平台针对管理员设置的功能有:添加并管理各种类型信息,管理用户账户信息,管理任务信息,管理任务资讯公告信息等内容。 校园悬赏任务平台针对用户设置的功能有:查看并修改个人信息,查看任务信息,查看任务资讯公告信息等内容。 系统登录功能是程序必不可少的功能,在登录页面必填的数据有两项,一项就是账号,另一项数据就是密码,当管理员正确填写并提交这二者数据之后,管理员就可以进入系统后台功能操作区。项目管理页面提供的功能操作有:查看任务,删除任务操作,新增任务操作,修改任务操作。任务资讯公告信息管理页面提供的功能操作有:新增任务资讯公告,修改任务资讯公告,删除任务资讯公告操作。任务资讯公告类型管理页面显示所有任务资讯公告类型,在此页面既可以让管理员添加新的任务资讯公告信息类型,也能对已有的任务资讯公告类型信息执行编辑更新,失效的任务资讯公告类型信息也能让管理员快速删除。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值