H5新特性-canvas绘图--渐变对象路径(最复杂)--图片--变形操作
今天的目标
3.1:canvas绘图--(重点掌握:渐变对象.路径.图片.变形)
3.2:canvas绘图--渐变对象
线性渐变: linearGradient
径向渐变:
var g = ctx.createLinearGradient(x1,y1,x2,y2);
g.addStopColor(offset,color);
..
ctx.fillStyle = g;
ctx.strokeStyle = g;
3.3:canvas绘图--路径(最复杂)
Path:由多个坐标点组成任意形状,路径不见,可用于
"描边","填充","裁剪"...
ctx.beginPath(); 开始一条新路径
ctx.closePath(); 闭合当前路径
ctx.moveTo(x,y); 移动指定点
ctx.lineTo(x,y); 从当前点到指定点画直线
ctx.arc(cx,cy,r,start,end); 绘制圆拱形
cx cy 圆心
r 半径
start 开始角度 (弧度0~2*PI)
end 结束角度 角度*Math.PI/180==弧度
ctx.stroke(); 描边
ctx.fill(); 填充
练习:使用描边绘制一个坐标轴
练习:使用圆拱形绘制可以前进的圆环进度条
练习:创建一个函数openMouth()/closeMouth();
创建定义时器,每隔1s交替调用
openMouth()/closeMouth();
3.4: canvas绘图--图片
canvas属于客户端技术,图片在服务器中,所以浏览器必须先下载要绘制的图片,且等待图片异步加载完成.
var p3 = new Image(); 创建图片对象
p3.src = "x.jpg"; 下载指定图片
p3.onload = function(){ 图片下载完成触发事件
console.log(p3.width);
ctx.drawImage(p3,x,y); 原始大小绘图
ctx.drawImage(p3,x,y,w,h); 拉伸绘图
}
练习:在画布四个角各画一架飞机
练习:在画布左上角画一个左右移动飞机
canvas绘图核心知识点--重占
绘制矩形:
ctx.fillRect();ctx.strokeRect();ctx.clearRect();
绘制文本
ctx.fillText();ctx.strokeText();ctx.measureText().width
绘制路径
ctx.beginPath();ctx.closePath();
ctx.moveTo();ctx.lineTo();
ctx.arc();ctx.stroke();ctx.fill()
绘制图像
ctx.drawImage();
3.4: canvas绘图--变形操作
canvas绘图可以针对于某一个图像/图形,的绘制过程
进行变形 rotate,translate
ctx.rotate(弧度); 旋转画笔,轴点画布的原点.
ctx.translate(x,y); 平移原点
ctx.save(); 保存画笔状态(存盘)
ctx.restore(); 恢复画笔状态到上一次保存(读取存盘)
练习:在画布左上角画一个绕自己为中心旋转飞机1
练习:在画布右上角画一个绕自己为中心旋转飞机2
飞机2旋转速度是飞机1 2倍svg绘图
练习:使用canvas绘制随机改变验证码图片!
var str = "ABC..abcdefghim...1234567890";
var char = str[字符串长度随机数] 17:45~17:57
要求:
画布背景随机颜色[浅色],ctx.fillRect();
文字内容随机,大小随机,颜色随机(深色),旋转角度随机
5条随机干扰线(深色), 贝赛尔曲线
100个干扰点(半径为1圆)
H5新特性-canvas绘图--渐变对象路径(最复杂)--图片--变形操作的更多相关文章
- H5新特性——--第三方绘图工具库 echarts(canvas)---SVG绘图
今天学习的内容 3.1:h5新特性---第三方绘图工具库 echarts(canvas) 百度 echarts;d3;two.js;.... 3.2:h5新特性---SVG绘图 3.2:h5新特性-- ...
- HTML新特性--canvas绘图-文本
一.html5新特性--canvas绘图-文本(重点) #常用方法与属性 -ctx.strokeText(str,x,y); 绘制描边文字(空心) str:绘制文本 x,y:字符串左上角位置(以文 ...
- H5新特性-视频,音频-Flash-canvas绘图
json格式 json - > AJAX json:数据格式,通常是以字符串形式表示 对象 {"name":"james","age" ...
- H5新特性汇总
H5新特性: 新增选择器 document.querySelector.document.querySelectorAll 拖拽释放(Drag and drop) API 媒体播放的 video 和 ...
- H5新特性---SVG--椭圆--直线--文本--滤镜(高斯滤镜--模糊)--地理定位
今天的目标 3.1:h5新特性--SVG--椭圆 <ellipse rx="" ry="" cx="" cy="" ...
- H5新特性---Web Worker---Web Stroage
今天的目标 3.1:h5新特性八--Web Worker---代码就3行 程序:program 存储在外存(磁盘)中代码 进程:Process/Task 将程序调用内存中,分配空间 线程:Thread ...
- H5新特性--WebStorage--WebSocke
今天的目标 3.2:h5新特性--WebStorage localStorage 在客户端浏览器保存数据 永久保存 保存数据 localStorage [key] = value 保存数据 loca ...
- H5新特性实现对class的增删改
直接撸代码 全靠死记硬背 没什么技术点 HTML部分 <!DOCTYPE html> <html lang="en"> <head> <m ...
- Atitti html5 h5 新特性attilax总结
Atitti html5 h5 新特性attilax总结 Attilax觉得不错的新特性 3.语义Header和Footer (The Semantic Header and Footer) 8.占位 ...
随机推荐
- JS常见兼容性问题
兼容性问题:函数(方法)兼容 描述:部分W3C指定的函数,有部分老的浏览器不支持 解决: 条件判断,如果有,则使用,添加原型方法,例如 String 的 trim 方法 if(!String.prot ...
- 实现ls-l功能
实现代码 #include <stdio.h> #include <unistd.h> #include <stdlib.h> #include <diren ...
- 深度学习原理与框架-图像补全(原理与代码) 1.tf.nn.moments(求平均值和标准差) 2.tf.control_dependencies(先执行内部操作) 3.tf.cond(判别执行前或后函数) 4.tf.nn.atrous_conv2d 5.tf.nn.conv2d_transpose(反卷积) 7.tf.train.get_checkpoint_state(判断sess是否存在
1. tf.nn.moments(x, axes=[0, 1, 2]) # 对前三个维度求平均值和标准差,结果为最后一个维度,即对每个feature_map求平均值和标准差 参数说明:x为输入的fe ...
- WPF 主窗口关闭时结束所有相关线程
程序主窗口的 Closed 事件中添加代码: Process.GetCurrentProcess().Kill();
- U3D 设置帧率与垂直同步
1,设置帧率: Application.targetFrameRate = 60: //-1为无限制 2,垂直同步 project settings -> quality,任何level的垂直同 ...
- MySQL多实例的环境下,服务器端本地连接到指定实例的问题(sock方式连接)
涉及到sock连接的问题. 为了测试MySQL的某些个特性,在一个机器上安装了多个MySQL的实例,如下截图,有两个实例,一个端口是8000,一个端口是8001.在使用mysql -uroot -p ...
- CR--同事分享学习
1.持续发布是什么? 频繁地将软件的新版本,交付给质量团队或者用户,以供评审. 2.对接持续发布需要具备什么条件? 1) 测试自动化程度较高,持续发布的终态是不需要人工介入 2) 做到持续集成,持 ...
- 深入理解C++11
[深入理解C++11] 1.很多 现实 的 编译器 都 支持 C99 标准 中的__ func__ 预定 义 标识符 功能, 其 基本 功能 就是 返回 所在 函数 的 名字. 编译器 会 隐式 地 ...
- ADDED、ADDED_TO_STAGE、REMOVED、REMOVED_FROM_STAGE这几个事件的区别
var _container:Sprite = new Sprite(); _container.addEventListener(Event.ADDED,onAdded); _container.a ...
- 区块链入门(4)Truffle创建项目,编译,及项目部署
上一章的结尾说这一次要讲编写一个智能合约部署到测试网络集群中,并进行交易,但我自己越看越觉得内容挺多的.先讲下truffle的项目创建,编译和部署的问题,然后再做上面说的事情吧. truffle是一套 ...