canvas杂记

canvas标签

<canvas width=600 height=400></canvas>

//1. 拿到画布
var canvas = document.querySelector("canvas"); //2. 创建画图工具(画家), 本质上是个js专门用来绘图的一个对象; 它提供了所有的关于绘图的属性和方法
var context = canvas.getContext("2d");

画线api

1.	moveTo(x,y)
2. lineTo(x,y)
3. stroke() //描边
4. fill() //填充 其他一些api:
1. beginPath()
//创建新的玻璃纸
//为了避免重复印刷,我们就重新创建一张新的空白的玻璃纸,将后面要绘制的图形,画在这个新的玻璃纸上
2. closePath()
//把路径闭合

设置颜色api

//描边
//默认情况下, 填充色和描边都是黑色的
//设置描边色
context.strokeStyle = "red"; //颜色的写法和css写法是一样的
context.stroke(); //填充
//设置填充色
context.fillStyle = "yellowgreen";
context.fill();

关于路径填充问题-非零填充原则

//非零填充原则
//在由路径围成的区域内部,任意一个点, 拉一条射线。 看和这个射线相交的路径有几条。 路径的方向是顺时针,就是1. 如果逆时针,就是-1, 把所有的值相加, 如果是0, 就不填充, 如是非0, 就填充 例子(自己体会):
//画两个三角形
//顺时针绘制
context.moveTo(0, 100);
context.lineTo(400, 100);
context.lineTo(400, 400);
//把路径闭合
context.closePath(); //路径是逆时针绘制
context.moveTo(200, 200);
context.lineTo(300, 240);
context.lineTo(300, 200);
context.closePath(); context.fillStyle = "red";
context.fill();

绘制矩形api

1.直接传入 x, y, width, height, 就可以绘制一个矩形

 context.rect(100, 100, 200, 200);
context.strokeStyle = "red";
context.stroke();
context.fillStyle = "yellow";
context.fill(); 2. 直接创建一个描边的矩形 //创建玻璃纸, 画矩形路径, 描边, 把玻璃纸销毁
context.strokeStyle = "red";
context.strokeRect(100, 100, 200, 200); 3. 直接创建一个填充的矩形 //创建玻璃纸, 画矩形路径, 填充, 把玻璃纸销毁
context.fillRect(100, 100, 200, 200); //注意: 黄色的边不会显示,是因为上面那一句,画完之后,就把玻璃纸销毁了
context.strokeStyle = "yellow";
context.stroke();

绘制圆型api

语法:
context.arc(x, y, radius, startRadian, endRadian, direction); 画弧形:
context.arc(300, 200, 100, 0, 0.5*Math.PI); //画弧形
context.stroke(); 画扇形:
//从31度的地方,画到81度的地方
context.arc(300, 200, 100, 31/180*Math.PI, 81/180*Math.PI); //画完扇形之后,再画线到圆心, 再关闭路径
context.lineTo(300, 200);
context.closePath();
context.fill();

线条api

1.	线条粗细
//设置线条的粗细, 不需要加px
context.lineWidth = 15;
2. 线条头部
//线条的头部的设置
context.lineCap = "round"; //默认是butt, 记住round

线性渐变

1. 需要创建出一个渐变对象
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. 通过fillRect画一个矩形
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); 2. 填色
gradient.addColorStop(0, "red");
gradient.addColorStop(0.3, "yellow");
gradient.addColorStop(0.6, "green");
gradient.addColorStop(1, "orange"); 3. 将渐变对象设为填充色
context.fillStyle = gradient; 4. 画圆并填充
context.arc(c2.x, c2.y, c2.r, 0, 2*Math.PI);
context.fill();

阴影

//和css3相比, 阴影只能设一个, 不能设内阴影
//水平偏移, 垂直的偏移, 模糊程度, 阴影的颜色 //设置阴影的参数
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 10;
context.shadowColor = "yellowgreen"; //画一个矩形
context.fillStyle = "red";
context.fillRect(100, 100, 300, 200);

文字

//绘制文字
//text就是要绘制的文字, x, y就是从什么地方开始绘制
context.strokeText("text", x, y) context.font = "60px 微软雅黑";
context.strokeText("hello, world", 100, 100);
// context.fillText("hello, world", 100, 100);

文字的对齐方式

//垂直方向
context.textAlign = "left"; //left,right,center,默认是left
//水平方向
context.textBaseline = "middle"; //top,middle,bottom,默认top

图片绘制

var image = new Image();
image.src = "./img/gls.jpg"; 1. 3参数
image.onload = function () {
context.drawImage(image, 100, 200);
} 2. 5参数 //图片绘制5参模式(缩放模式), 就是将图片显示在画布上的某一块区域(x, y, w, h),如果这个区域的宽高和图片不一至,会被压缩或放大
image.onload = function () {
context.drawImage(image, 100, 100, 100, 100);
} 3. 9参数 /*
参数的解释:
image: 就是大图片本身
中间的四个参数, 代表从图片的150, 0的位置,截取 150 * 200的一块区域
后面的四个参数, 将刚才截取的小图, 显示画布上 100, 100, 150, 200的这个区域
*/
context.drawImage(image, 150, 0, 150, 200, 100, 100, 150, 200); 例子:图片放大器
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d"); //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; //当前 x, y这个点的位置,是否在玻璃纸上的路径的区域的内部
if (context.isPointInPath(x, y) == true) {
console.log("在内部");
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这个区域,就形成了一个放大的效果
context.drawImage(image, x, y, 40, 40, 300, 200, 120, 120);
}
}
</script>

清除

context.clearRect(300, 200, 300, 200);

缩放

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d"); context.fillRect(300, 200, 100, 100); context.scale(0.5, 0.5);
context.fillRect(300, 200, 100, 100);

平移

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d"); context.fillRect(0, 0, 100, 100);
context.translate(300, 200);
context.fillRect(0, 0, 100, 100);

旋转

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d"); context.moveTo(20, 0);
context.lineTo(100, 0);
context.stroke(); context.rotate(30/180*Math.PI);
context.beginPath();
context.moveTo(20, 0);
context.lineTo(100, 0);
context.stroke();

动画

function draw() {
//清空画布
context.clearRect(0, 0, canvas.width, canvas.height); window.requestAnimationFrame(draw);
}
draw();

save、restore

//save保存, restore恢复, 还原
//save的作用,是把context的当前的状态,保存起来;
//restore是把context最近一次保存的状态还原 demo:
context.fillStyle = "red";
context.strokeStyle = "blue";
context.shadowColor = "cyan"; //把当前的context整个保存一份
context.save(); //就会把当前的context整个保存一份 context.fillRect(100, 100, 100, 100); context.fillStyle = "green";
context.fillRect(300, 200, 100, 100); //把最近保存的那个context直接拿过来用
context.restore(); context.fillRect(500, 300, 100, 100);

canvas杂记的更多相关文章

  1. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  2. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

  3. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  4. 获取Canvas当前坐标系矩阵

    前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...

  5. Canvas坐标系转换

    默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...

  6. Canvas绘图之平移translate、旋转rotate、缩放scale

    画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...

  7. 用html5的canvas和JavaScript创建一个绘图程序

    本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...

  8. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

  9. 使用 JavaScript 和 canvas 做精确的像素碰撞检测

    原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...

随机推荐

  1. https://gitee.com/tomsun28/bootshiro-------需要研究的项目

    https://gitee.com/tomsun28/bootshiro-------需要研究的项目

  2. HDU 1274 递归拼接字符串

    题目大意: 根据所给的数字,表示其相连的字符的输出个数,或是下一个括号中的所有字符的输出个数 每一个相互对应的 '(' 和 ')' 中的所有字母均作为一组数据处理 在每一次dfs过程中都处理好这样一个 ...

  3. UVAL - 6755 - Swyper Keyboard

    先上题目: https://icpcarchive.ecs.baylor.edu/external/67/6755.pdf 题目复制起来比较麻烦. 题意:定义一种操作:给出一个字符串,然后手指就按照给 ...

  4. 【eclipse】eclipse启动优化&打印GC信息&重要的堆结构连接

    eclipse启动优化,终于不那么卡了! 网上找了好多都是myEclipse的优化的,跟eclipse有点区别,找了很多方法还是不能让这个eclipse(Version: Kepler Release ...

  5. 【触发器】MySQL触发器使用详解

    MySQL包含对触发器的支持.触发器是一种与表操作有关的数据库对象,当触发器所在表上出现指定事件时,将调用该对象,即表的操作事件触发表上的触发器的执行. 创建触发器在MySQL中,创建触发器语法如下: ...

  6. 两个栈实现队列,开始做错了 —— 剑指Offer

    开始大意了,这道题目居然做错了: https://www.nowcoder.net/practice/54275ddae22f475981afa2244dd448c6?tpId=13&tqId ...

  7. IOS--JSON数据解析成字典

    JSON解析成字典 {} –>字典 [] –>数组 ""–>字符串 11/11.1–>NSNumber true/false –>NSNumber n ...

  8. struts2前端页面读取Clob/BLOB

    在通过Struts2标签显示对象的Clob属性值的时候.显示的并非CLOB或者BLOB的内容,而是显示的toString方法的值 比如我在实体中的注解为: @Lob @Column(name = &q ...

  9. Linux下的画图软件

    Pinta是一款和windows下的画图相类似打一款画图软件,并且它还包含了一些基本的图像编辑工具. 比如:标尺.图层.操作历史记录.图像调整.渲染效果等等,可以满足对图像处理要求不太高的用户的基本需 ...

  10. 自己制作Android包括@hide接口的SDK

    Android系统存在一些系统级应用与framework代码耦合较深,编译的时候依赖非常多类里面的@hide接口.这类应用怎么来编译呢?首先我们须要制作一份包括Hide接口的SDK,方法例如以下(以a ...