canvas的常用api
canvas
标签
<canvas width="600" height="400" id="canvas"></canvas>
不给宽高的话默认是300+150
怎么用
//拿到canvas
var canvas = document.getElementById("canvas");
//创建画图工具
var context = canvas.getContext("2d");
相关的api及用法
//画线
context.moveTo(100, 100);
context.lineTo(300, 100);
context.lineTo(300, 200);
//画第二条线
//画第二条线
context.moveTo(100, 300);
context.lineTo(300, 300);
//最后要描边才会出效果
context.stroke();
//创建一张新的玻璃纸
context.beginPath();
//画第三条线
context.moveTo(500, 100);
context.lineTo(500, 300);
//只要执行stroke,都会玻璃纸上的图形重复印刷一次
context.stroke();
//填充
context.fill();
//设置描边色
context.strokeStyle = "red"; //颜色的写法和css写法是一样的
context.stroke();
//填充
//设置填充色
context.fillStyle = "yellowgreen";
context.fill();
//把路径闭合
context.closePath();
//设置线条的粗细, 不需要加px
context.lineWidth = 15;
//线条的头部的设置
context.lineCap = "round"; //默认是butt, 记住round
非零填充原则
在由路径围成的区域内部,任意一个点, 拉一条射线。 看和这个射线相交的路径有几条。 路径的方向是顺时针,就是1. 如果逆时针,就是-1, 把所有的值相加, 如果是0, 就不填充, 如是非0, 就填充
画矩形
//直接传入 x, y, width, height, 就可以绘制一个矩形
//画在玻璃纸上
context.rect(100, 100, 200, 200);
context.strokeStyle = "red";
context.stroke();
context.fillStyle = "yellow";
context.fill();
//直接创建一个填充的矩形
//创建玻璃纸, 画矩形路径, 填充, 把玻璃纸销毁
context.fillRect(100, 100, 200, 200);
//黄色的边不会显示,是因为上面那一句,画完之后,就把玻璃纸销毁了
context.strokeStyle = "yellow";
context.stroke();
//如果放在fillRect上面就可以实现
圆形绘制
//x轴是0度开始
//x, y: 圆心位置;radius: 半径的长度; startRadian, endRadian 代表的是起始弧度和结束弧度;dircetion代表的圆形的路径的方向,默认是顺时针(是否逆时针, 默认值是false),如果传true就是逆时针,最后一个参数是可以不传的, 默认就是顺时针
context.arc(x, y, radius, startRadian, endRadian, direction);
//从31度的地方,画到81度的地方
context.arc(300, 200, 100, 31/180*Math.PI, 81/180*Math.PI);
画飞镖转盘
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
for (var i = 0; i < 10; i++) {
context.moveTo(320+i*20,200);
// i % 2代表是奇数还是偶数, 偶数就逆时针, 奇数就顺时针
context.arc(300, 200, 20 + i * 20, 0, 2*Math.PI, i%2==0);
}
context.fillStyle = "green";
context.fill();
context.stroke();
线性渐变
//1. 需要创建出一个渐变对象
// var gradient = context.createLinearGradient(100, 100, 300, 100);
//参数代表哪个点到哪个点,这里写的是左上角到右下角的意思
var gradient = context.createLinearGradient(100, 100, 300, 380);
//2. 添加渐变颜色
gradient.addColorStop(0, "red");
gradient.addColorStop(0.5, "hotpink");
gradient.addColorStop(1, "yellowgreen");
//3. 将渐变对象设为填充色
context.fillStyle = gradient;
//4. 画一个矩形
context.fillRect(100, 100, 200, 280);
径向渐变
//1. 创建渐变对象
//内圆
var c1 = {x: 260, y: 160, r: 0};
//外圆
var c2 = {x: 300, y: 200, r: 120};
var gradient = context.createRadialGradient(c1.x, c1.y, c1.r, c2.x, c2.y, c2.r);
gradient.addColorStop(0, "red");
gradient.addColorStop(0.3, "yellow");
gradient.addColorStop(0.6, "green");
gradient.addColorStop(1, "orange");
//2. 把渐变对象设为填充色
context.fillStyle = gradient;
//3. 画圆并填充
//内圆的部分是用0的位置填充的; 内圆的边到外圆的边所发生的渐变叫, 径向渐变
context.arc(c2.x, c2.y, c2.r, 0, 2*Math.PI);
context.fill();
径向渐变画球
//1. 创建一个径向渐变
c1 = {x: 240, y: 160, r: 0};
c2 = {x: 300, y: 200, r: 120};
var gradient = context.createRadialGradient(c1.x, c1.y, c1.r, c2.x, c2.y, c2.r);
gradient.addColorStop(1, "gray");
gradient.addColorStop(0, "lightgray");
//2. 将渐变对象设为填充色
context.fillStyle = gradient;
//3. 画圆并填充
context.arc(c2.x, c2.y, c2.r, 0, 2*Math.PI);
context.fill();
径向渐变画彩虹
//实现彩虹,给里面的圆一个半径80是关键
var c1 = {x: 300, y: 200, r: 80};
var c2 = {x: 300, y: 200, r: 150};
var gradient = context.createRadialGradient(c1.x, c1.y, c1.r, c2.x, c2.y, c2.r);
gradient.addColorStop(1, "red");
gradient.addColorStop(6/7, "orange");
gradient.addColorStop(5/7, "yellow");
gradient.addColorStop(4/7, "green");
gradient.addColorStop(3/7, "cyan");
gradient.addColorStop(2/7, "skyblue");
gradient.addColorStop(1/7, "purple");
gradient.addColorStop(0, "white");
//设为填充色
context.fillStyle = gradient;
//画圆并填充
context.arc(c2.x, c2.y, c2.r, 0, 2*Math.PI);
context.fill();
//遮挡下半部分
context.fillStyle = "white";
context.fillRect(0, 200, 600, 200);
阴影效果
//和css3相比, 阴影只能设一个, 不能设内阴影
//水平偏移, 垂直的偏移, 模糊程度, 阴影的颜色
//设置阴影的参数
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 10;
context.shadowColor = "yellowgreen";
//画一个矩形
context.fillStyle = "red";
context.fillRect(100, 100, 300, 200);
绘制文字api
//绘制文字
//text就是要绘制的文字, x, y就是从什么地方开始绘制
//context.strokeText("text", x, y)
context.font = "60px 微软雅黑";
//context.strokeText("hello, world", 100, 100);
context.fillText("hello, world", 100, 100);
文字对齐方式
基线在文字的那个方向
水平方向
//默认在left
//关键api:context.textAlign = "left";
context.textAlign = "left";
context.fillText("left", 300, 120);
context.textAlign = "center";
context.fillText("center", 300, 190);
context.textAlign = "right";
context.fillText("right", 300, 260);
实现文字在画布的右上方
1. 先设置right
2. 给canvas.width,0即可
context.font = "60px 微软雅黑";
context.textAlign = "right";
context.textBaseline = "top";
context.fillText("hello, world", canvas.width, 0);
垂直方向
//默认是top
//关键api:context.textBaseline = "top";
context.fillText("default", 50, 200);
context.textBaseline = "top";
context.fillText("top", 150, 200);
context.textBaseline = "middle";
context.fillText("middle", 251, 200);
context.textBaseline = "bottom";
context.fillText("bottom", 400, 200);
图片的绘制
3参模式: 将img从x, y的地方开始绘制, 图片有多大,就绘制多大,超出canvas的部分就不显示了
//context.drawImage(img, x, y)
var image = new Image();
image.src = "./img/gls.jpg";
//必须要等到图片加载出来,才能进行绘制的操作
image.onload = function () {
context.drawImage(image, 100, 200);
}
5参模式(缩放模式), 就是将图片显示在画布上的某一块区域(x, y, w, h),如果这个区域的宽高和图片不一至,会被压缩或放大
var image = new Image();
image.src = "./img/gls.jpg";
image.onload = function () {
context.drawImage(image, 100, 100, 100, 100);
}
图片绘制的九参模式, 就是把原图(img)中的某一块(imagex,imagey,imagew,imageh)截取出来, 显示在画布的某个区域(canvasx, canvasy, canvasw, canvash)
//理解关键:
//(imagex,imagey,imagew,imageh)
//(canvasx, canvasy, canvasw, canvash)
var image = new Image();
image.src = "./img/gls.jpg";
image.onload = function () {
/*
参数的解释:
image: 就是大图片本身
中间的四个参数, 代表从图片的150, 0的位置,截取 150 * 200的一块区域
后面的四个参数, 将刚才截取的小图, 显示画布上 100, 100, 150, 200的这个区域
*/
context.drawImage(image, 150, 0, 150, 200, 100, 100, 150, 200);
}
画布中的放大器实现
判断位置的关键api:
context.rect(0, 0, 150, 100);
canvas.onmousemove = function (event) {
var x = event.offsetX;
var y = event.offsetY;
}
//1. 加载图片
var image = new Image();
image.src = "./img/gls.jpg";
image.onload = function () {
//1. 先把大图画在右上角
context.drawImage(image, 0, 0, 150, 100);
//创建一个矩形的路径
context.rect(0, 0, 150, 100);
//2. 判断当前鼠标是否hover到上面的图片上了
canvas.onmousemove = function (event) {
//原图和左上角的图的比例是3: 1
var x = event.offsetX;
var y = event.offsetY;
//if (x >= 0 && x<=150 && y >=0 && y <= 100) {}
//当前 x, y这个点的位置,是否在玻璃纸上的路径的区域的内部
if (context.isPointInPath(x, y) == true) {
console.log("在内部");
//比例要按照原图的比例来看,这里的小图是原图的1/3,所以*3
x = x * 3 - 20;
y = y * 3 - 20;
//每一次在画之前,先把之前画的擦除
//某300, 200, 300, 200这个区域的东西全部擦除
context.clearRect(300, 200, 300, 200);
//从x, y这个点,截取40*40的局部小图,显示在图布, 300, 200, 80, 80这个区域,就形成了一个放大的效果
//这里40,40,是因为上面-20的宽和高的原因
context.drawImage(image, x, y, 40, 40, 300, 200, 120, 120);
}
else {
console.log("不在内部");
}
}
}
简单的用计时器实现小人移动
//1. 加载图片
var image = new Image();
image.src = "./img/DMMban.png";
image.onload = function () {
//第几行图片
var yindex = 2;
//某一行的第几张图片
var xindex = 0;
//小人的宽和高
var w = image.width/4;
var h = image.height/4;
//小人水平方向的坐标x值
var x = 0;
//小人每一步走多远
var speed = 10;
var index = 0;
setInterval(function () {
index += 1;
//循环切换图片
xindex = index % 4;
//边界的判断
if (x >= canvas.width - w) {
speed = -speed; //-10
yindex = 1;
}
if (x < 0) {
speed = -speed;
yindex = 2;
}
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(image, xindex * w, yindex * h, w, h, x, 200, w, h);
//每走一步x要往前移动
x += speed;
}, 200);
}
画布的缩放,平移,旋转api
context.scale(0.5, 0.5);
context.translate(300, 200);
context.rotate(30/180*Math.PI);
canvas的常用api的更多相关文章
- html5 canvas常用api总结(一)
1.监听浏览器加载事件. window.addEventListener("load",eventWindowLoaded,false); load事件在html页面加载结束时发生 ...
- html5 canvas常用api总结(三)--图像变换API
canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...
- canvas学习之API整理笔记(二)
前面我整理过一篇文章canvas学习之API整理笔记(一),从这篇文章我们已经可以基本了解到常用绘图的API.简单的变换和动画.而本篇文章的主要内容包括高级动画.像素操作.性能优化等知识点,讲解每个知 ...
- Selenium Web 自动化 - Selenium常用API
Selenium Web 自动化 - Selenium常用API 2016-08-01 目录 1 对浏览器操作 1.1 用webdriver打开一个浏览器 1.2 最大化浏览器&关闭浏览器 ...
- compass General 常用api学习[Sass和compass学习笔记]
compass 中一些常用api 包括一些浏览器hack @import "compass/utilities/general" Clearfix Clearfix 是用来清除浮动 ...
- java基础3.0:Java常用API
本篇介绍Java基础中常用API使用,当然只是简单介绍,围绕重要知识点引入,巩固开发知识,深入了解每个API的使用,查看JavaAPI文档是必不可少的. 一.java.lang包下的API Java常 ...
- 通过Canvas及File API缩放并上传图片完整示例
<!DOCTYPE html> <html> <head> <title>通过Canvas及File API缩放并上传图片</title> ...
- C++ 中超类化和子类化常用API
在windows平台上,使用C++实现子类化和超类化常用的API并不多,由于这些API函数的详解和使用方法,网上一大把.本文仅作为笔记,简单的记录一下. 子类化:SetWindowLong,GetWi ...
- node.js整理 02文件操作-常用API
NodeJS不仅能做网络编程,而且能够操作文件. 拷贝 小文件拷贝 var fs = require('fs'); function copy(src, dst) { fs.writeFileSync ...
随机推荐
- Swift Method Dispatching — a summary of my talk at Swift Warsaw
Swift Method Dispatching When announcing Swift, Apple described it as being much faster than Objecti ...
- Tomcat的几种部署方式
1. 直接把项目的根目录放在: apache-tomcat-*.*\webapps\ROOT 这样即可以通过http://127.0.0.1:8080 来访问 2. 把项目根目录放在: apach ...
- 团体程序设计天梯赛-练习集-L1-045. 宇宙无敌大招呼
L1-045. 宇宙无敌大招呼 据说所有程序员学习的第一个程序都是在屏幕上输出一句“Hello World”,跟这个世界打个招呼.作为天梯赛中的程序员,你写的程序得高级一点,要能跟任意指定的星球打招呼 ...
- tomcat实现连接数据库
192.168.30.23mkdir /web/webapptar xf SLSaleSystem.tar.gz -C /web/webappls /web/wenbappvim /usr/loca ...
- 日记——OI历程
学OI也一年多了(2015.12-),一直没学出个像样的东西.相比dalao们,我还是弱爆了. ljj,qyf,yyf三位三区dalao. xxy,myj两位三区学长dalao. 稍微总结一下前一段时 ...
- oracle 单独开始一个事物的写法 。
SET TRANSACTION NAME 'Update salaries'; SAVEPOINT before_salary_update; UPDATE employees SET salary= ...
- Method and apparatus for an atomic operation in a parallel computing environment
A method and apparatus for a atomic operation is described. A method comprises receiving a first pro ...
- Go语言net/http 解读.
Http包提供实现HTTP客户端和服务端的方法与函数. Get.Head.Post.PostForm配合使用实现HTTP请求: resp, err := http.Get("http://e ...
- HDU 1115
题意很明白要求多边形重心.方法已在上篇讲过了. #include <iostream> #include <cstdio> #include <cstring> # ...
- Android传统HTTP请求get----post方式提交数据(包括乱码问题)
1.模仿登入页面显示(使用传统方式是面向过程的) 使用Apache公司提供的HttpClient API是面向对象的 (文章底部含有源码的连接,包括了使用async框架) (解决中文乱码的问题.主要 ...