canvas---从基础到实战
canvas是H5新增的一个元素，可以用来描绘各种你想描绘的东西。
canvas本身没有绘制能力，你可以把它当做一个容器，需要我们用脚本，也就是js来给他灌满水。
兼容性
1. IE9版本以上、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其属性和方法。
2. IE8 以及更早的版本不支持 <canvas> 元素。
基本用法
要想使用canvas，大致分三步：
第一步：页面中添加canvas元素
第二步：给该元素添加标识，并设置宽高
第三步：获取该元素，使用getContent()方法获取绘制属性和方法，开始绘制
下面我们简单画一个长方形：
<body>
<canvas id="canvas-wrap" width="" height="">你的浏览器不支持canvas</canvas>
</body>
<script>
// 获取canvas元素
let canvasWrap = document.getElementById("canvas-wrap");
// 获取属性和方法
let context = canvasWrap.getContext("2d");
// 开始绘制
context.fillStyle="#FF0000";
context.fillRect(,,,);
</script>
页面效果：
路径：
使用canvas可以支持多种在画布上绘制路径的方法，从而可以勾勒出多种线条
案例一：画一个直角：
<body>
<canvas id="canvas-wrap" width="" height="">你的浏览器不支持canvas</canvas>
</body>
<script>
// 获取canvas元素
let canvasWrap = document.getElementById("canvas-wrap");
// 获取属性和方法
let context = canvasWrap.getContext("2d");
// 移动
context.moveTo(,);
// 线条
context.lineTo(,);
context.lineTo(,);
// 开始画
context.stroke();
</script>
案例二：画一条曲线
<body>
<canvas id="canvas-wrap" width="" height="">你的浏览器不支持canvas</canvas>
</body>
<script>
// 获取canvas元素
let canvasWrap = document.getElementById("canvas-wrap");
// 获取属性和方法
let context = canvasWrap.getContext("2d");
// 移动
context.moveTo(,);
// 创建二次贝塞尔曲线
context.quadraticCurveTo(,,,);
// 开始画
context.stroke();
</script>
附：贝塞尔曲线对照表：
ease：cubic-bezier(.25, .1, .25, 1)
liner：cubic-bezier(0, 0, 1, 1)
ease-in：cubic-bezier(.42, 0, 1, 1)
ease-out：cubic-bezier(0, 0, .58, 1)
ease-in-out：cubic-bezier(.42, 0, .58, 1)
In Out Back:cubic-bezier(0.68, -0.55, 0.27, 1.55)
案例三：画一个正方形并用绿色填充
<body>
<canvas id="canvas-wrap" width="" height="">你的浏览器不支持canvas</canvas>
</body>
<script>
// 获取canvas元素
let canvasWrap = document.getElementById("canvas-wrap");
// 获取属性和方法
let context = canvasWrap.getContext("2d");
// 移动
context.moveTo(,);
// 线条
context.lineTo(,);
context.lineTo(,);
context.lineTo(,);
context.lineTo(,);
// 颜色设置
context.fillStyle = "green";
// 填充
context.fill();
</script>
绘制矩形：
矩形是canvas给出的唯一能直接能用方法描绘的图形，他提供了四个方法。
案例：画两个矩形交叉，并清除叠加的部分：
<body>
<canvas id="canvas-wrap" width="" height="">你的浏览器不支持canvas</canvas>
</body>
<script>
// 获取canvas元素
let canvasWrap = document.getElementById("canvas-wrap");
// 获取属性和方法
let context = canvasWrap.getContext("2d");
//绘制一个矩形
context.fillStyle = "#1fb19e";
context.fillRect(, , , ); //绘制另一个矩形
context.fillStyle = "blue";
context.fillRect(, , , ); //将这两个矩形重叠的地方清除
context.clearRect(, , , );
</script>
文字：
1. canvas绘图上下文提供了2个绘制文本方法和一个相关方法
2. fillText()和strokeText()都可以接收4个参数：要绘制的文本字符串、x坐标、y坐标和可选的最大像素宽度。而measureText()接受一个参数，表示要测量的文本。
这三个方法共有的属性：
案例： 画一个200*100的矩形，文字水平居中
<body>
<canvas id="canvas-wrap" width="" height="">你的浏览器不支持canvas</canvas>
</body>
<script>
// 获取canvas元素
let canvasWrap = document.getElementById("canvas-wrap");
// 获取属性和方法
let context = canvasWrap.getContext("2d");
//绘制一个矩形
context.lineWidth=
context.strokeStyle="#1fb19e";
context.rect(,,,);
context.stroke()
// 绘制文字
let str = "Hello World";
context.font="30px Microsoft YaHei";
context.textAlign="center";
context.strokeText(str,,);
</script>
图片：
案例： 裁剪头像
<body style="display: flex">
<img src="https://pic1.zhimg.com/80/v2-66f0648db805932fd3e8a94fcdd58f36_hd.jpg" id="img" />
<canvas id="canvas-wrap" width="" height="" style="margin-left: 20px">你的浏览器不支持canvas</canvas>
</body>
<script>
let img = document.getElementById("img");
img.onload = function () {
// 获取canvas元素
let canvasWrap = document.getElementById("canvas-wrap");
let context = canvasWrap.getContext("2d");
context.drawImage(img,,,,,,,,);
}
</script>
效果:
canvas转换成图片：
<body>
<canvas id="canvas-wrap" width="" height="">你的浏览器不支持canvas</canvas>
</body>
<script>
// 获取canvas元素
let canvasWrap = document.getElementById("canvas-wrap");
// 获取属性和方法
let context = canvasWrap.getContext("2d");
//绘制一个矩形
context.lineWidth=
context.strokeStyle="#1fb19e";
context.rect(,,,);
context.stroke()
// 绘制文字
let str = "Hello World";
context.font="30px Microsoft YaHei";
context.textAlign="center";
context.strokeText(str,,);
//取得图像的数据URI
var url = canvasWrap.toDataURL("image/png"); //显示图像
var image = document.createElement("img");
image.src = url;
document.body.appendChild(image);
</script>
实战：
实战一： 钟表的画法
<body>
<canvas id="canvas-wrap" width="" height="">你的浏览器不支持canvas</canvas>
</body>
<script>
// 获取canvas元素
let canvasWrap = document.getElementById("canvas-wrap");
// 获取属性和方法
let ctx = canvasWrap.getContext("2d"); ctx.beginPath();
ctx.arc(,,,,*Math.PI); ctx.moveTo(,);
ctx.arc(,,,,*Math.PI);
ctx.stroke(); //变换原点
ctx.translate(,); ctx.textBaseline = "middle";
ctx.fillText('',,);
ctx.textAlign="center";
ctx.fillText('',,);
ctx.fillText('',-,);
ctx.fillText('',,-); ctx.moveTo(,);
ctx.lineTo(,);
ctx.moveTo(,);
ctx.lineTo(,-); ctx.stroke();
</script>
实战二：画一个简单的海报
<body>
<canvas id="canvas" width="" height=""></canvas>
<img src="20190802165310.jpg" id="img" alt="">
<img id="imgTwo" src="https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=0003b03088b1cb133e693b15e56f3173/0bd162d9f2d3572c257447038f13632763d0c35f.jpg" alt="">
</body>
<script>
var canvasWrap = document.getElementById("canvas");
var ctx = canvasWrap.getContext("2d");
var img = document.getElementById("img");
var imgTwo = document.getElementById("imgTwo");
// 画文字方法
function drawText (ctx,text,font,x,y) {
ctx.font=`${font}px Microsoft YaHei`;
ctx.strokeText(text,x,y);
}
img.onload = function () {
let arr = [
{
text:'马云，我想和你说',
font: ,
x: ,
y:
},
{
text:'不,你不说',
font: ,
x: ,
y:
},
{
text:'是什么让我唱出《西海情歌》？',
font: ,
x: ,
y:
}
]
// 图片
ctx.drawImage(img,,);
ctx.drawImage(imgTwo,,,,);
// 矩形
ctx.fillStyle = "#1fb19e"
ctx.fillRect(, , ,);
ctx.fillRect(, , ,);
ctx.fillRect(, , ,);
// 文字
ctx.strokeStyle = "#fff";
arr.forEach(el => {
let { text, font, x, y} = el
drawText(ctx, text, font, x, y)
})
}
</script>
效果：
实战三：画一个柱状图
<body>
<canvas id="canvas" width="" height=""></canvas>
</body>
<script>
var ocanvas = document.getElementById("canvas");
var mycanvas = ocanvas.getContext("2d");
var arr = [,,,,,,,,,,,]; //第一先画xy轴
function line(aX,aY,bX,bY) {//开始和结束的横坐标 开始和结束的纵坐标
mycanvas.beginPath();
mycanvas.moveTo(aX,aY);
mycanvas.lineTo(bX,bY);
mycanvas.stroke();
}
line(,,,);
line(,,,); //第二用for循环 画11条线 利用上面line的画线方法
for(var i=;i<;i++){
//300,80,900,80
//300,120,900,120
line(,+i*,,+i*);
write(-i*,,+i*) }
//第三定义一个矩形的函数方法
function rect(X,Y,width,height) {
mycanvas.beginPath();
mycanvas.fillStyle="#abcdef";
mycanvas.rect(X,Y,width,height);
mycanvas.fill();
mycanvas.closePath()
} //第四定义一个方法 绘制横纵坐标
function wenrect() {
for(var i=;i<;i++){
var width=;
var height=arr[i]*;
var X=+i*+i*;
var Y=-height;
rect(X,Y,width,height);
write((i+)+"月",+i*+i*,)
}
}
wenrect(); //添加字
function write(start,ox,oy) {
mycanvas.beginPath();
mycanvas.fillStyle = "black";
mycanvas.fillText(start,ox,oy);
mycanvas.closePath();
}
</script>
效果：
canvas---从基础到实战的更多相关文章
- HTML5 Canvas（画布）实战编程初级篇：基本介绍和基础画布元素
欢迎大家阅读HTML5 Canvas(画布)实战编程初级篇系列,在这个系列中,我们将介绍最简单的HTML5画布编程.包括: 画布元素 绘制直线 绘制曲线 绘制路径 绘制图形 绘制颜色,渐变和图案 绘制 ...
- Node.js基础与实战
Node.js基础与实战 Node.jsJS高级进阶 NODE原理与解析 REPL交互环境 模块与NPM Buffer缓存区 fs文件操作 Stream流 TCP&UDP 异步编程 HTTP& ...
- Android中Canvas绘图基础详解（附源码下载） (转)
Android中Canvas绘图基础详解(附源码下载) 原文链接 http://blog.csdn.net/iispring/article/details/49770651 AndroidCa ...
- RabbitMQ-从基础到实战（3）— 消息的交换
1.简介 在前面的例子中,每个消息都只对应一个消费者,即使有多个消费者在线,也只会有一个消费者接收并处理一条消息,这是消息中间件的一种常用方式.还有另外一种方式,生产者生产一条消息,广播给所有的消费者 ...
- RabbitMQ-从基础到实战（2）— 防止消息丢失
转载请注明出处 1.简介 RabbitMQ中,消息丢失可以简单的分为两种:客户端丢失和服务端丢失.针对这两种消息丢失,RabbitMQ都给出了相应的解决方案. 2.防止客户端丢失消息 如图,生产者P向 ...
- RabbitMQ-从基础到实战（1）— Hello RabbitMQ
转载请注明出处 1.简介 本篇博文介绍了在windows平台下安装RabbitMQ Server端,并用JAVA代码实现收发消息 2.安装RabbitMQ RabbitMQ是用Erlang开发的,所以 ...
- RabbitMQ-从基础到实战（4）— 消息的交换（下）
0.目录 RabbitMQ-从基础到实战(1)- Hello RabbitMQ RabbitMQ-从基础到实战(2)- 防止消息丢失 RabbitMQ-从基础到实战(3)- 消息的交换(上) 1.简介 ...
- RabbitMQ-从基础到实战（5）— 消息的交换（下）
转载请注明出处 0.目录 RabbitMQ-从基础到实战(1)- Hello RabbitMQ RabbitMQ-从基础到实战(2)- 防止消息丢失 RabbitMQ-从基础到实战(3)- 消息的交换 ...
- RabbitMQ-从基础到实战（6）— 与Spring集成
0.目录 RabbitMQ-从基础到实战(1)- Hello RabbitMQ RabbitMQ-从基础到实战(2)- 防止消息丢失 RabbitMQ-从基础到实战(3)- 消息的交换(上) Rabb ...
- canvas绘画基础(一)：认识canvas画布
html5提供了一个<canvas>标签,结合javascript的canvas api接口可以用来绘制图形和动画.最近工作中涉及到画图的任务,下面来了解一下canvas的基础:canva ...
随机推荐
- 如何为nginx配置https(免费证书)
前言: 给http协议申请ssl免费证书,还是比较主流的一种方式,但是逐渐得一些浏览器不支持自签名的证书了.毕竟这是为了使用者及平台都变得安全的方式,所以无可厚非的,而且也有很多网站即使不使用商业付费 ...
- geometry_msgs的ros message 类型赋值
test_custom_particles.cpp // // Created by gary on 2019/8/27. // #include <ros/ros.h> #include ...
- Class.forName的作用
在java语言中,任何类只有被装载到JVM上才能运行.Class.forName()方法的作用就是把类加载到JVM中,它会返回一个与带有给定字符串明的类或者接口相关联的Class对象,并且JVM会加载 ...
- Kotlin搞起来——2.基础知识
在上一节中简单的给大家介绍了下Kotlin的特点,以及结合自己实际项目 中的使用来帮助大家了解这门语言,其实真的没你想象中的那么难,本文打算 介绍的是Kotlin中基础相关的一些语法(用法),有个大概 ...
- 【LeetCode】从contest-21开始。（一般是10个contest写一篇文章）
[LeetCode Weekly Contest 29][2017/04/23] 第17周 Binary Tree Tilt (3) Array Partition I (6) Longest Lin ...
- Django前后端分离跨域请求问题
一.问题背景 之前使用django+vue进行前后端分离碰到跨域请求问题,跨域(域名或者端口不同)请求问题的本质是由于浏览器的同源策略导致的,当请求的响应不是处于同一个域名和端口下,浏览器不会接受响应 ...
- Python中类
1.类的方法与普通的函数只有一个特别的区别——它们必须有一个额外的第一个参数名称, 按照惯例它的名称是 self,self代表类的实例,而非类. self 不是 python 关键字,我们把他换成 r ...
- Redis Key过期事件
解决方案1: 可以利用redis天然的key自动过期机制,下单时将订单id写入redis,过期时间30分钟,30分钟后检查订单状态,如果未支付,则进行处理但是key过期了redis有通知吗?答案是肯定 ...
- js百度地图API创建弧线并修改弧线的弧度
去百度API官网下载CurveLine.min.js,注意复制下来的Js前面的行号要删除. // 百度地图API功能 var map = new BMap.Map("container&qu ...
- java-设计原则
七大设计原则 单一职责原则: 尽可能的功能细分(类细分,方法细分):如一个类由于某变量而细分方法,该细分方法再细分,需要重构(最好细分类) 接口隔离原则:(C类实现A接口全部方法,而D,B类依赖于A接 ...