巧用canvas

作为一项有意思的新技术，canvas给我们带来了对网页绘图和网页动画的新革命。举个简单的例子，如果以前要在网页中插入一个图标或者是图像，就得用img标签来插入，或者是作为背景图片放入页面中，而现在，除了上述方法，我们还可以运用canvas技术来画出需要的图标或者图像，不仅节省了设计的时间，还减少了http的请求次数，加快了网页的加载速度，下面我就简单介绍下canvas到底有哪些实用的功能吧。

1、设计各种图标和logo

作为程序员，既会编程又会设计的人我想应该是比较少的，所以这就造成了只要一碰到设计方面的问题，不论是大还是小都不得不求助于设计师，虽然设计方面的工作确实是设计师的职责，但是如果能运用好canvas这个工具，就能自行画出很多想要的图标和logo，不仅能提高自己的设计水平还减少了和设计师的沟通时间，当然目前来说只能应用于不太复杂的图形，更丰富和绚丽的图像当然还是得借助专业的图像软件啦。

2、编写网页游戏

相信大家都玩过游戏，无论是端游还是页游，都是游戏的一种，当然既然本文探讨的是canvas，那么重点说的就是页游方面的应用了。作为一项可以在网页图像方面大有可为的技术，canvas有着可以非常丰富的绘图接口，可以满足基本的网页游戏前端需要。

3、制作动画

按理来说不用canvas其实也是能做出动画的，但是这样就会有一定的限制，一些动画效果就没办法呈现。而通过canvas，我们能借助其自身的绘图能力，能制作出动画所需要的一系列画面，从而获得更丰富的画面效果。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • 浅谈jquery中使用canvas的问题

    使用jquery控制canvas的时候会出现一些问题, var cas=document.getElementById('canvas').getContext('2d');//这个是使用JavaScript的方法,这个没有问题. //下面是使用jquery的方法操控canvas. $(document).ready(function(){ var cas=$('#canvas').getContext('2d');<span style="white-space:pre">

  • JS+Canvas 实现下雨下雪效果

    JS+Canvas 实现下雨下雪效果

    最近做了一个项目,其中有需求要实现下雨小雪的动画特效,所以在此做了个drop组件,来展现这种canvas常见的下落物体效果.在没给大家介绍正文之前,先给大家展示下效果图: 展示效果图: 下雨 下雪 看起来效果还是不错的,相对于使用创建dom元素来制作多物体位移动画, 使用canvas会更加容易快捷,以及性能会更好 调用代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

  • javascript html5 canvas实现可拖动省份的中国地图

    javascript html5 canvas实现可拖动省份的中国地图

    本文实例分享了html5 canvas可拖动省份的中国地图实现方法,供大家参考,具体内容如下 1.数据获取 画地图需要省份边界坐标,理论上可以每次都用百度API获取数据并绘图,但为了增加效率,首先将所有坐标都获取下来并存入数据库中. 新建省份数据数组 复制代码 代码如下: var allZoneData = [{'name':'辽宁省','been':'yes','id':'01'},<span style="font-family: Arial, Helvetica, sans-seri

  • js HTML5 Canvas绘制转盘抽奖

    js HTML5 Canvas绘制转盘抽奖

    本文实例为大家分享了js转盘抽奖的具体代码,供大家参考,具体内容如下 1.实现的基本效果 2.主要的内容 •html5中canvas标签的使用  •jQueryRotate.js旋转插件 3.主要html代码 <body> <div class="content"> <div class="wheel"> <canvas class="item" id="wheelCanvas" wi

  • 微信小程序 wxapp画布 canvas详细介绍

    微信小程序 wxapp画布 canvas :最近学习微信小程序的知识,这里记录下小程序 waxpp画布canvas 的知识: canvas 属性名 类型 默认值 说明 hidden Boolean false 设置画布的显示/隐藏,hidden值为true表示隐藏,值为false表示显示 canvas-id String   canvas组件的唯一标识符 binderror EventHandle   当发生错误时触发error事件,detail = { errMsg: 'something w

  • 快速解决Canvas.toDataURL 图片跨域的问题

    如题,在将页面的图片地址进行本地输出时(Html2Canvas.js),因不同源存在跨域问题,会出现toDataURL访问权限问题: [Redirect at origin 'http://sub1.xx.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested res

  • js canvas仿支付宝芝麻信用分仪表盘

    js canvas仿支付宝芝麻信用分仪表盘

    这是一个仿支付宝芝麻信用分的一个canvas,其实就是一个动画仪表盘. 首先, 上原图: 这个是在下支付宝上的截图,分低各位见笑了.然后看下我用canvas实现的效果图: <canvas id="canvas" width="400" height="700" data-score='724'></canvas> <!-- 设置data-score,分数区间[400, 900] --> 唉,总感觉不像.这个是G

  • Canvas 制作动态进度加载水球详解及实例代码

    Canvas 制作动态进度加载水球详解及实例代码

    Canvas 动态进度加载水球 前言 之前看到一些球型的动态加载的效果,一直想自己动手做一个,正好这段时间重温了一个Canvas,所以就尝试了一下. 实现思路 关于水波的实现,使用了sin()函数,通过每一帧不断的移动sin()函数曲线,实现水波动态效果.然后,通过绘制圆形路径,进行clip(),实现球型效果. sin()函数相关 这里说一下sin()函数的相关基础,对于绘制水波的影响. 看一下图,回顾一下中学sin()函数的基础. 从图中可以看出,当函数为sin(x)时,值域为[-1, 1],

  • 微信小程序 canvas开发实例及注意事项

    微信小程序 wxcanvas 测试手机为IPHONE6,开发者工具版本0.10.102800.开发者工具0.11.112301版本也一样 微信小程序里的canvas 非 h5 canvas有很多不一样的地方,以下把微信小程序的canvas叫做wxcanvas 下面全是我一点点测试出的干货,耐心看: 1.wxcanvas,不像h5canvas那样有width和height属性和width和height的style样式.他只有style样式,可以理解为他就是个框吧: 2.wxcanvas不要当成真的

  • 微信小程序 canvas API详解及实例代码

    微信小程序 canvas API详解及实例代码

    绘图是每个移动应用必备的技术,基本上和Android,IOS,等移动开发都是相同的,创建个上下文,给你个画布再上画,官网给的小例子都比较全了自己去看吧,drawImage时没有反应不知道是BUG还是电脑不能测试待定,http://wxopen.notedown.cn/api/api-canvas.html 屏幕就像是数学上的坐标轴,且在第四象限,以屏幕左上角为圆点,X轴向右为正向左为负,Y轴向下为正向上为负(这点和数学上相反的)以圆点为基点画个距离圆点上下50宽高100的矩形来演示canvas基

  • 微信小程序 Canvas增强组件实例详解及源码分享

    微信小程序 Canvas增强组件实例详解及源码分享

    WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; height: 600px;" canvas-id="line-canvas-1">canvas> JS: var wezrender = require('../../lib/wezrender'); zr = wezrender.zrender.init("

随机推荐