html5新特性canvas绘制图像
在前端页面开发过程中偶尔会有需要对数据进行相应的数学模型展示,或者地理位置的动态展示,可能就会想到用canvas,网上有很多已经集成好的,比如说类似echarts,确实功能非常强大,而且用到了canvas,所以对canvas的使用研究了以下,做一下总结,方便复习。
1.利用canvas画一条线:
首先,在页面定义一个canvas标签
<canvas id="line" width="200" height="200"></canvas>
然后js中开始绘制
var line = document.getElementById('line');
if(line.getContext){
var lineCtx = line.getContext('2d');
lineCtx.moveTo(50,50);
lineCtx.lineTo(150,150);
lineCtx.stroke();
}
首先找到需要绘制图像的画布元素,然后if判断浏览器是否支持canvas,支持以后,就开始绘制,画一条线的步骤非常简单,定义起始位置坐标后,stroke()函数,绘制;
2.利用canvas画一个矩形:
<canvas id="rect" width="200" height="200"></canvas>
var rect = document.getElementById('rect');
if(rect.getContext){
var rectCtx = rect.getContext('2d');
rectCtx.fillStyle = '#7068D6';
rectCtx.fillRect(50,50,100,100);
}
fillStyle用来填充矩形的颜色,fillRect(x,y,width,height)填充矩形;
3.利用canvas来绘制圆形:
<canvas id="circle" width="200" height="200"></canvas>
var circle = document.getElementById('circle');
if(circle.getContext){
var circleCtx = circle.getContext('2d');
circleCtx.beginPath();
circleCtx.arc(100,100,50,0,2*Math.PI);
circleCtx.stroke();
}
绘制圆形跟矩形有点区别,需要先beginPath(),然后利用arc(圆心x轴坐标,圆心y轴坐标,半径长度,起始度数,结束度数),圆形绘制时是顺时针开始,所以如果想绘制弧形,要知道怎么弄。
4.绘制文字:
<canvas id="txt" width="200" height="200"></canvas>
var txt = document.getElementById('txt');
if(txt.getContext){
var txtCtx = txt.getContext('2d');
txtCtx.font = '30px Arial';
txtCtx.fillText('hi,luhan',50,50);
txtCtx.strokeText('hi.luhan',50,100);
}
绘制文字有几个参数可以设置,font、fillText(‘要绘制的文字’,x,y),注意fillText是填充文字,所以绘制出来的是实心文字,strokeText(‘要绘制的文字’,x,y)绘制的是空心文字;
5.结合以上几种绘图方式,绘制一个笑脸:
<canvas id="canvas" width="200" height="200"></canvas>
var canvas = document.getElementById('canvas');
if(canvas.getContext){
var mapCtx = canvas.getContext('2d');
mapCtx.beginPath();
mapCtx.arc(75, 75, 50, 0, Math.PI * 2, true);
mapCtx.moveTo(110, 75);
mapCtx.arc(75, 75, 35, 0, Math.PI, false);
mapCtx.moveTo(65, 65);
mapCtx.arc(60, 65, 5, 0, Math.PI * 2, true);
mapCtx.moveTo(95, 65);
mapCtx.arc(90, 65, 5, 0, Math.PI * 2, true);
mapCtx.stroke();
}
6.利用canvas绘制静态图片:
<canvas id="img" width="200" height="200"></canvas>
var img = document.getElementById('img');
if(img.getContext){
var imgCtx = img.getContext('2d');
var imgEl = new Image();
imgEl.src = 'img/headPic.jpg';
imgEl.onload = function(){
imgCtx.drawImage(imgEl,10,10,100,100);
}
}
等待图片资源加载完毕,开始绘制drawImage(图片元素,x,y,width,height);
以上就是对canvas绘制各种图形的总结,如果想绘制复杂的图形,可能就需要用集成好的组件更方便,数据转图形类的推荐echarts,官方实例超多,echarts实例展示
如果想要酷炫动画,推荐17素材网站
最后,在前端开发过程中,如果只是需要某一部分的实现需要canvas,就可以直接用网上大家集成好的,基本原理懂了,如果用的过程中有什么问题也是能猜个大概,不必浪费太多时间。
html5新特性canvas绘制图像的更多相关文章
- HTML新特性--canvas绘图-文本
一.html5新特性--canvas绘图-文本(重点) #常用方法与属性 -ctx.strokeText(str,x,y); 绘制描边文字(空心) str:绘制文本 x,y:字符串左上角位置(以文 ...
- html5新特性与用法大全了解一下
有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...
- HTML5新特性--svg-echarts(重点)-拖动API-WebWorker
一.html5新特性--svg--(折线/渐变特效对象/滤镜) #折线:多个坐标点组件一条折线 <polyline points="50,50 70,55 60,66 " s ...
- html5新特性
这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...
- HTML5新特性-- -定时器
一.定时器:一次性定时器/周期性定时器 #requestAnimationFrame 智能定时器 #此定时器主要使用范围:动画和游戏中 特点: setTimeout(fn,500); setInter ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- HTML5新特性之CSS+HTML5实例
1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...
- web全栈架构师[笔记] — 03 html5新特性
HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...
- 第二季第八天 HTML5新特性
在函数内部window.a = a 在全局中就可以拿到这个变量 变量命名.作为函数的参数的时候要详细.调用的时候可以简单点 做全局变量的两个方案 1.绑在标签上data 2.闭包 视频一般都是二进 ...
随机推荐
- 居然可以像玩游戏一样学Git
工作中经常用到 git,但是用到的指令也都是比较初级的.简单的.当时学习的过程也是有点痛苦.各种概念理解起来要么靠想象,要么自己创建工程提交记录,然后执行指令,看具体效果.这样学下来是事倍功半. 在搜 ...
- 能动的电脑配件「GitHub 热点速览 v.22.11」
看到这个标题就知道硬核的 B 站 UP 主稚晖君又更新了,本次带来的是一个造型可爱的小机器人.除了稚晖君这个一贯硬核的软硬件项目之外,本周也有很多有意思的新项目,像 Linux 服务监控小工具 Ray ...
- 终结初学者对ElasticSearch、Kibana、Logstash安装的种种困难
项目中准备使用ElasticSearch,之前只是对ElasticSearch有过简单的了解没有系统的学习,本系列文章将从基础的学习再到深入的使用. 咔咔之前写了一份死磕MySQL文章,如今再入一个系 ...
- 华夏基金X袋鼠云:基金业数字化转型,为什么说用户才是解题答案?
"精准营销是以客户为中心,运用各种可利用的方式,在恰当的时间,以恰当的价格,通过恰当的渠道,向恰当的顾客提供恰当的产品." 这是学者许瑾在科特勒精准营销理论的基础上,从实践的角度对 ...
- OpenCv基础_四
Harris角点检测 理解 内部点:蓝框所示,无论滑动窗口水平滑动还是竖直滑动,框内像素值都不会发生大的变化 边界点:黑框所示,滑动窗口沿着某一个方向滑动框内像素点不会发生大的改变,但是沿着另一个方向 ...
- Docker——概述
出现原因:开发接替运维的工作,将jar包连同(mysql,jdk)等环境上线 实现:java -> jar(环境) -> 打包项目带上环境(镜像) -> (Docker仓库:商店) ...
- unicode和unicode编码
unicode编码是什么? 这其实是两个问题,unicode 是什么什么?unicode是怎样编码的? What is Unicode? Unicode provides a unique numbe ...
- GitFlow 工作流
1.概述 GitFlow 工作流定义了一个围绕项目发布的严格分支模型.虽然比功能分支工作流复杂几分,但提供了用于一个健壮的用于管理大型项目的框架. GitFlow 工作流没有用超出功能分支工作流的概念 ...
- uoj266[清华集训2016]Alice和Bob又在玩游戏(SG函数)
uoj266[清华集训2016]Alice和Bob又在玩游戏(SG函数) uoj 题解时间 考虑如何求出每棵树(子树)的 $ SG $ . 众所周知一个状态的 $ SG $ 是其后继的 $ mex $ ...
- leetcode刷题1--动态规划法回文串2
题目是: Given a string s,partition s such that every substring of the partition is a palindrome Return ...