canvas

1.Canvas是HTML5提供的一个标签,我们可以在这个盒子区域绘画
2.怎么绘画的呢? canvas对象有个一个方法可以让我们获取到一个CanvasRendderingContext2D对象,这个对象给我们提供了在canvas盒子上画图的功能.
3.不是所有的浏览器都支持canvas标签,几乎所有智能手机都支持这个标签
4.canvas市场:游戏,广告,动画,数据图形结合的复杂界面(可视化数据)
5.浏览器不支持的时候,它就像个p标签的功能

特点
1.网络请求传输 (面试：页面优化)
2.高性能：传输的时候只传输一个字符串，没有很多节点可以节省很多内存
3.游戏
4.可视化
5.数据图形结合产品
6.写在简历上，可以增加你的机会

canvas绘画方法

1、画直线的方法：
var pen=canvas.getContext(“2D”)可以获得绘画功能
起点位置：pen.moveTo(x,y)
轨迹方法：pen.lineTo(x,y)
上一次终点是下一次起点，连接下一个点
可以用pen.closePath()从终点连到起点
轨迹的颜色(不写默认黑色):pen.strokeStyle=’rgb(149,134,255)’//red,rgb(),rgba(),#521
填充颜色:pen.fillStyle=’rgb(149,134,255)’//red,rgb(),rgba(),#666
沿着轨迹绘制:只有轨迹是不行的,这一步才是真的绘制 pen.stroke()
如果想让每条轨迹颜色不一样，使用pen.beginPath()开辟新的轨迹

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><canvas id="canvas" width="600px" height="400px"></canvas></body><script type="text/javascript">//一个等边三角形var canvas=document.querySelector("#canvas");var pen=canvas.getContext("2d")pen.moveTo(100,200);pen.lineTo(300,200)pen.lineTo(200,27)pen.lineTo(100,200)// pen.closePath()用于最后封口pen.stroke()</script>
</html>

2、画弧线方法：
pen.arc(x,y,r,起始角度，结束角度，顺逆时针)
x,y是圆心，r是半径，顺逆时针由布尔值判断
角度填弧度值(π:Math.PI)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>饼状图</title></head><body><canvas id="canvas" width="600px" height="600px"></canvas><script type="text/javascript">var canvas=document.querySelector("#canvas")var ctx=canvas.getContext("2d")var deg=Math.PI/180;var data=[{title:"电子1",money:240},{title:"电子2",money:240},{title:"电子3",money:240},{title:"电子4",money:240},{title:"电子5",money:240},{title:"电子6",money:240}]var data2=[{name:"生活服务"},{name:"油盐酱醋"},{name:"王者荣耀充值"},{name:"吃饭开销"},{name:"吃饭开销2"},{name:"吃饭开销3"}]var r=200;ctx.moveTo(300,300);ctx.lineTo(300+r,300)var total=data.reduce((sum,next)=>{return {money:sum.money+next.money}})//推导过程/* var angle=data[0].money/total.money*360var starAngle=0*degvar endAngle=angle*degctx.arc(300,300,200,starAngle,endAngle)ctx.lineTo(300,300)var angle2=data[1].money/total.money*360var starAngle=endAnglevar endAngle2=endAngle+angle2*degctx.arc(300,300,200,starAngle,endAngle2)ctx.lineTo(300,300)*/function f1(index,endAngle){if(index==data.length){return}else {var angle=data[index].money/total.money*360*deg;var start=endAngle;var end=angle+endAngle;ctx.arc(300,300,200,start,end);ctx.lineTo(300,300);var nextIndex=index+1;ctx.fillStyle='#'+ Math.random().toString(16).substr(-6);//随机色ctx.fill()ctx.stroke()ctx.fillText(data2[index].name,300+270*Math.cos(endAngle+angle/2),300+270*Math.sin(endAngle+angle/2));ctx.beginPath()f1(nextIndex,end)//回调}}ctx.strokeStyle="lightblue"ctx.fill()      f1(0,0)</script></body>
</html>

其他

3.文字的绘制不用加pen.stroke()
文字样式
pen.font = “30px Verdana, Geneva, sans-serif”;
//font复合属性:以前css的font一样
绘制文字
pen.fillText(文字内容, x, y);//x,y起点

4.矩形//矩形
pen.fillRect(x,y,w,h)
参数:x,y起点 w,h宽高

5.清除区域
//清除
pen.clearRect(x,y,w,h)
参数:x,y起点 w,h宽高
//清屏
canvas.width=canvas.width//重新给画布设置宽度,整个界面就清除了,也可以达到清除效果

6.图片
pen.drawImage(img,x,y);//先学这个,img是图片对象
pen.drawImage(img,sx,sy,sw,sh,x,y,w,h);
参数:除红色参数外都是可选参数

img 图片对象//可以是标签对象,可以自己创建:var img=new Image();img.src=’xxx’
sx,sy 可选,剪切相对于(原始图片左上角开始)原始图片x,y 坐标
sw,sh可选,剪切原始图片的宽高
x,y 绘制图片的x,y坐标
w,h 可选,绘制图片的宽高

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><canvas style="border: 1px red solid;" id="canvas" width="600" height="600"></canvas><img src="img/bird.jpg" ><script type="text/javascript">window.onload=function(){var canvas=document.getElementById("canvas")var ctx=canvas.getContext("2d");var img=document.querySelector("img");//设置全局变量 i，x让定时器里的动作跟着i，x的变化而变化var i=0;var x=0;var timer=setInterval(function(){x=x+16;i++;i=i%3;//有几个部分变化就对几取余ctx.drawImage(img,610/3*i,0,610/3,290,x,0,610/3,290)//610/3是一个鸟占的宽},250)}</script></body>
</html>

canvas初识及其简单使用相关推荐

html5 canvas 实现一个简单的叮当猫头部
html5 canvas 实现一个简单的叮当猫头部原文:html5 canvas 实现一个简单的叮当猫头部 html5的canvas是很强大的,今天也是温习了一下之前的基础知识,然后学着做了一个简单 ...
【akka】初识Akka 简单介绍
1.概述转载:初识Akka 简单介绍 1.1 Flink为什么要用Akka来代替RPC? 原先的RPC服务存在的问题: 没有带回调的异步调用功能,这也是为什么Flink的多个运行时组件需要poll状 ...
html：canvas画布绘图简单入门-绘制时钟-3
canvas示例系列: html:canvas画布绘图简单入门-1 html:canvas画布绘图简单入门-2 html:canvas画布绘图简单入门-绘制时钟-3 html:canvas画布绘图简单 ...
python人狗大战游戏_day22 01 初识面向对象----简单的人狗大战小游戏
day22 01 初识面向对象----简单的人狗大战小游戏假设有一个简单的小游戏:人狗大战怎样用代码去实现呢? 首先得有任何狗这两个角色,并且每个角色都有他们自己的一些属性,比如任务名字nam ...
html刮奖特效,用CANVAS模拟一个简单的刮奖效果
用CANVAS模拟一个简单的刮奖效果.html> * { padding: 0; margin: 0; } .box { position: relative; height: 400px; w ...
Git/GitHub （一）：初识/及简单的实现本地与github的关联操作
Git/GitHub (一): 初识/及简单的实现本地与github的关联操作 GitHub: 基于python的开源量化交易平台开发框架官网:https://github.com/ Git: 是一 ...
html：canvas画布绘图简单入门-画板-5
canvas示例系列: html:canvas画布绘图简单入门-1 html:canvas画布绘图简单入门-2 html:canvas画布绘图简单入门-绘制时钟-3 html:canvas画布绘图简单 ...
H5初识，应用canvas实现一个简单的七巧板图形
简单的记录一下学习过程应用html5的canvas绘制了一个十分简单的七巧板图形,没有什么难度,只要将各个点的坐标预先计算好 <!DOCTYPE html> <html>&l ...
canvas做一个简单气泡图
数据结构: [{name: '土豆',num: 200,}, {name: '西瓜',num: 80,}, {name: '黄瓜',num: 85,}, {name: '粉丝',num: 70,}, ...

canvas初识及其简单使用

文章目录

canvas

canvas绘画方法

其他

canvas初识及其简单使用相关推荐

最新文章

热门文章