今天的目标

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绘图--渐变对象路径(最复杂)--图片--变形操作的更多相关文章

  1. H5新特性——--第三方绘图工具库 echarts(canvas)---SVG绘图

    今天学习的内容 3.1:h5新特性---第三方绘图工具库 echarts(canvas) 百度 echarts;d3;two.js;.... 3.2:h5新特性---SVG绘图 3.2:h5新特性-- ...

  2. HTML新特性--canvas绘图-文本

    一.html5新特性--canvas绘图-文本(重点) #常用方法与属性 -ctx.strokeText(str,x,y);   绘制描边文字(空心) str:绘制文本 x,y:字符串左上角位置(以文 ...

  3. H5新特性-视频,音频-Flash-canvas绘图

    json格式 json - > AJAX json:数据格式,通常是以字符串形式表示 对象 {"name":"james","age" ...

  4. H5新特性汇总

    H5新特性: 新增选择器 document.querySelector.document.querySelectorAll 拖拽释放(Drag and drop) API 媒体播放的 video 和 ...

  5. H5新特性---SVG--椭圆--直线--文本--滤镜(高斯滤镜--模糊)--地理定位

    今天的目标 3.1:h5新特性--SVG--椭圆 <ellipse rx="" ry=""  cx="" cy="" ...

  6. H5新特性---Web Worker---Web Stroage

    今天的目标 3.1:h5新特性八--Web Worker---代码就3行 程序:program 存储在外存(磁盘)中代码 进程:Process/Task 将程序调用内存中,分配空间 线程:Thread ...

  7. H5新特性--WebStorage--WebSocke

    今天的目标 3.2:h5新特性--WebStorage localStorage  在客户端浏览器保存数据 永久保存 保存数据 localStorage [key] = value 保存数据 loca ...

  8. H5新特性实现对class的增删改

    直接撸代码 全靠死记硬背 没什么技术点 HTML部分 <!DOCTYPE html> <html lang="en"> <head> <m ...

  9. Atitti html5 h5 新特性attilax总结

    Atitti html5 h5 新特性attilax总结 Attilax觉得不错的新特性 3.语义Header和Footer (The Semantic Header and Footer) 8.占位 ...

随机推荐

  1. MTK6261 11C之Init Analysis【手记】

    初始化流程 Application_Initialize systemInitialization(); HWDInitialization(); USC_Start(); OSTD_Init(); ...

  2. python学习 生成随机函数 random模块的用法

    random模块是用于生成随机数 常用函数 函数 含义 random() 生成一个[0,1.0)之间的随机浮点数 uniform(a,b) 生成一个a到b之间的随机浮点数 randint(a,b) 生 ...

  3. 谈谈你对spring的理解?

    spring么,就是春天了.春天,动物.....不可描述的季节……你懂得!!! 希望这么说能把面试官逗乐吧. spring可以实现java模块化开发,贯穿表现层,业务层,逻辑层,实现了各个层之间的解耦 ...

  4. 一个box四周边框阴影

    实现效果如图: 代码如下: .section { margin: 20upx 30upx; padding: 40upx; border-radius: 6px; border-top: #0670C ...

  5. linux 安装gcc8

    https://blog.csdn.net/longji/article/details/80400339 01 ubuntu1604desktop_x64 安装gcc8.1.0系统环境: gcc版本 ...

  6. C# 多线程传递参数或多个参数

    using System;using System.IO;using System.Text;using System.Threading; namespace ConsoleApp7{ class ...

  7. asp.net mvc 使用NPOI插件导出excel

    /// <summary> /// 交易账单 导出交易列表 /// </summary> /// <returns></returns> public ...

  8. hibernate写list到mysql

    用jpa写下面语句执行报错,估计要先手动转成字符串吧,工作忙没继续下去了. public void persist(Goods goods) { Assert.notNull(goods);// go ...

  9. selenium java 浏览器操作

    环境搭建 selenium 2.53 selenium-java-2.53.0.jar selenium-java-2.53.0-srcs.jar 原代码包 拷贝的工程lib下,做build path ...

  10. [leetcode]149. Max Points on a Line多点共线

    Given n points on a 2D plane, find the maximum number of points that lie on the same straight line. ...