canvas基础之旅
canvas 主要使用2D rendering context API 实现其功能和特效。
canvas 一般浏览器都支持,但在ie9之前的是不支持的。(解决办法:添加IxplorerCanvas 脚本。)
学习canvas需要用到javscript和jQuery。
首先要引入jQuery库。
定义画布:
<script type="text/javascript">
var canvas = $("#mycanvas");
var context = canvas.get(0).getContext("2d");
</script>
画正方形:context.fillRect(x,y,width,height);(x,y)是正方形离坐标原点的距离,width,height是正方形的宽,高。
.strokeRect()也可以画正方形。同样是四个参数。
两者的区别是:.fillRect()画的正方形是有填充色的,但没有边框。
.strokeRect()画的正方没有填充色,但有边框。
画线条:lineTo();但不能直接像fillRect()那样调用。
要先调用一些其他的方法:
contex.beginPath();//开始路径
context.moveTo(x,y);//路径的起点坐标;
context.lineTo(x,y);//路径的终点坐标;
context.closePath();//结束路径;
context.stroke();//画出路径;
线和正方形的样式都可以调用相同的方法修改其样式:
.strokeStyle= "rgb()";修改形状和路径的填充颜色;
.lineWidth = 10;//修改形状的和路径的线宽;
4.保存和恢复图片
他们的机制值栈机制(先进后出)
保存:.save(),保存画布状态,通过多次调用save(),能够将绘制状态保存到栈中,最早的在栈的底部。
恢复:restore(),恢复画布状态;通过多次调用restore()能够自动取出最初添加到栈中的绘图状态;
5.变形
5.1平移
translate(x,y);平移的是坐标的点,新的坐标点(x,y)=原来(x,y)+translate(x,y);
会影响执行平移后的所有元素。
5.2缩放
scale(2,2),缩放的是倍数,不是像素,是(x,y)分别乘以2;
5.3旋转
rotate(0.7854) //Math.PI/4
旋转是以圆点坐标为中心点的,常常和translate( )一起使用
注意他们之间的顺序:
5.4变形矩阵
transform(2, 0, 2, 0, 150, 150) //(x轴缩放,y轴倾斜,x轴倾斜,y轴缩放,x轴平移,y轴平移)
6.合成
6.1 全局阿尔法值(透明度) //值会影响到修改之后所绘制的全部对象
globalAlpha = 0.5 //值在0~1之间
6.2 合成操作
globalCompositonOperation = " "; 共有11中方式,详情见《Canvas基础教程》
7.效果
7.1阴影
设置阴影通过4个全局属性控制:
.shadowBlur = 20 ; 阴影的模糊值
.shadowOffsetX; x轴上的偏移量;
.shadowOffsetY ,y轴上的偏移量;
.shadowColor = "rgba(0, 0, 0, 0.5)" ,阴影的颜色以及透明度(透明度)可设可不设;
7.2渐变
渐变的方式有两种:
createLinearGradient:线性渐变
都返回→→canvasGradient对象;
createRadiaGradient:放射性渐变 createRadialGradient方法,参数有(Xstart,Ystart,radiusStart,XEnd,YEnd,radiusEnd),也就是说,它在实行渐变时,使用了两个圆,一个是原始的圆,一个是渐变式圆,其实,这种通过坐标与半径控制的方式可以实现很多样式,比如
var gradient = context.createLinearGradient(0, 0, 0, canvas.height( ) );//渐变起点的坐标(x, y),渐变终点的坐标(x, y)
gradient.addColorStop = (0, "rgb(0, 0, 0)" ); //渐变的起点以及颜色值;
gradient.addColorStop = (1, "rgb(0, 0, 0)"); //渐变的终点以及颜色值;(0表示渐变起点,1表示渐变终点)
context.fillStyle = gradient ;
context.fillRect(0, 0, canvas.width(), canvas.height() );
7.3贝塞尔曲线
quedraticCurveTo:二次贝塞尔曲线;quedraticCurveTo(cpx, cpy, x, y),四个参数:(cpx, cpy)控制点坐标,(x, y)目标点坐标
bezierCurveT0:三次贝塞尔曲线;bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y),六个参数。
8画布与图像
8.1将画布导出为图像
将作为图像导出用toDataUrl方法:
context.save();
context.fillRect(20,20,50,50);
context.fillStyle = "rgb(255, 255, 0)";
context.fillRect(100, 100,50,50);
context.restore();
context.fillRect(200, 200,50,50);
var dataURL = canvas.get(0).toDataUrl;
或者
var dataURL = canvas.get(0).toDataUrl;
var img = $("<img></img>");
img.attr("src", dataURL);
canvas.replacWith(img);
8.2加载图片
将图像加载到画布上,调用drawImage方法:
conttext.drawImage(image, x, y);//(要绘制的图像,绘制图像的x坐标,绘制图像y坐标).
drawImage 调用的方法有两种,参数也不同:
var image = new Image( );
image.src = "aa.jpg";
$("image").load(function(){
conttext.drawImage(image, x, y)
})
8.3调整图像
context.drawImage(image, x, y, width, height)
8.4剪裁图像
context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);(源图像,源图像的裁剪区域(x, y)坐标,源图像的裁剪区宽度和高度,目标图像的坐标(x, y),绘制图像的宽度和高度);
8.5图像阴影
context.shadowBluer = 20;
context.shadowColor = "rgb(255, 0, 0)";
var image = new Image();
image.src = "example.jpg";
$(image).load(function(){
context.drawImage(image, 100, 100, 200, 200);
});
但是对图片裁剪之后,图片的阴影会消失。
canvas基础之旅结束。2015/11/3
转载于:https://www.cnblogs.com/wine/p/4838437.html
canvas基础之旅相关推荐
- 好程序员分享24个canvas基础知识小结
好程序员分享24个canvas基础知识小结,非常全面详尽,推荐给大家. 现把canvas的知识点总结如下,以便随时查阅. 1.填充矩形 fillRect(x,y,width,height); 2.绘制 ...
- canvas在舞台上点击后图片旋转_View绘制系列(10)Canvas基础变换
Canvas基础变换 前面学习了Canvas相关的一些绘制方法,不知道大家发现没?我们都是根据左上角(0,0)点算出来新的坐标,然后再绘制,这样明显不符合我们平常基于坐标原点绘制的习惯,那么我们能不能 ...
- canvas基础-绘制矩形(1)
1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的& ...
- 好程序员分享24个canvas基础知识小结 1
好程序员分享24个canvas基础知识小结,非常全面详尽,推荐给大家. 现把canvas的知识点总结如下,以便随时查阅. 1.填充矩形 fillRect(x,y,width,height); 2.绘制 ...
- Canvas基础-粒子动画Part2
紧接上一篇文章 Canvas基础-粒子动画Part1 其实这篇早在一个星期之前就应该发了,无奈事情太多,而且我又跑去写微信公众号了. 粒子动起来 有了上一篇的基础,我们已经可以获得粒子,并将轮廓显示在 ...
- Canvas基础教程
文章目录 Canvas 基础教程 canvas绘制矩形 canvas路径 canvas圆弧 贝塞尔曲线 二次贝塞尔曲线 三次贝塞尔曲线 绘制文字 canvas变换 背景图片 双缓存 canvas渐变 ...
- 微信小程序详解 php,微信小程序canvas基础详解
canvas 元素用于在网页上绘制图形.HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像.本文主要和大家分享微信小程序canvas基础详解,希望能帮助到大家. 一.了 ...
- JS——canvas基础及其应用
JS--canvas及其应用 一.canvas基础 1.canvas--画布: canvas本身没有外观,只是一个画板 IE9以前不支持 canvas不要使用css来定义大小,要直接使用自身的属性wi ...
- html5 canvas基础与动画开发详解-吴华-专题视频课程
html5 canvas基础与动画开发详解-533人已学习 课程介绍 一.本课程几乎包括所有canvas常用的api用法讲解 二.包括以下案例应用: 1.坐标系绘制 2.图片裁剪与填充 ...
最新文章
- Oracle创建自增id,sql直接创建
- angular的路由
- Stm32 IAP程序编写及用户程序编写
- safari video一次性获取一个文件_Requests库(十四)一文揭秘如何获取快手关注的视频...
- FreeMarker基础语法教程
- Asp.Net Core WebAPI+PostgreSQL部署在Docker中
- react leaflet_如何使用Leaflet在React中轻松构建地图应用
- webview 本地 html空白,WKWebView加载本地html遇到的坑与解决办法
- LibreOffice/Calc:带条件判断的求和
- linux中ffmpeg实现视频的转吗,Linux系统下视频转换ffmpeg
- javascript+Java 实现MD5加密登录密码
- python函数参数为文件名_从零开始第5步:Python 函数和模块
- Atitit 输入法原理与概论ati use
- 史上最强NLP知识集合:知识结构、发展历程、导师名单
- 《机械设计基础》题库
- 2021认证杯 第二阶段 思路加代码
- 用c语言寸件照换底颜色,怎么给证件照换底色【使用步骤】
- 小程序-e.detail.value动态获取input的value
- 青少年编程等级考试对孩子有用吗?
- TruckSim Quick Start Guide(TruckSim快速入门)
热门文章
- 要开始研究.NET了
- 一个符号引发的讨论,对抗攻击算法FGSM的纯粹版:FGNS,附代码
- 车辆行人识别训练与部署,EasyDL-Jetson Nano 端边云协作专场公开课
- 微软超级麻将AI Suphx论文发布,研发团队深度揭秘技术细节
- YOLACT++:目前最热门的实时实例分割开源库
- ICCV 2019 | 旷视研究院提出文字检测新方法:像素聚合网络PAN
- 太棒了!8 个流行的 Python 可视化工具包,你喜欢哪个?
- 带你自学Python系列(四):range、min、max、sum函数
- 计算机原理实验八位算术逻辑运算,8位算术逻辑运算计算机组成原理实验一
- html搞笑注释,9个最有趣的代码注释