![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML5动画
wenmin1987
这个作者很懒,什么都没留下…
展开
-
HTML5动画----canvas基础8(图片操作与图片压缩)
前端JS利用canvas的drawImage()对图片进行压缩:https://blog.csdn.net/qq_43043859/article/details/90600563[js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern):https://blog.csdn.net/weixin_34177064/article/details/85944037...原创 2020-08-16 23:20:48 · 829 阅读 · 0 评论 -
HTML5动画----canvas基础7(嵌入图像)
嵌入图像:drawImage()<script type="text/javascript">//1.确定图像的来源2.使用drawImage()将图像绘制到canvas中//一、图片的来源有4种://1.页面内的图片:已知图片元素的ID,可通过document.images集合、document.getElementsByTagName()方法或getElementById()获取该图片元素//2.其他canvas元素:document.getElementsByTagName(.原创 2020-08-16 23:17:29 · 391 阅读 · 0 评论 -
HTML5动画----canvas基础6(3创建阴影、绘制文字)
创建阴影:<script type="text/javascript"> function draw(){ var ctx=document.getElementById("myCanvas").getContext('2d'); //设置阴影 ctx.shadowOffsetX=3; ctx.shadowOffsetY=3; ...原创 2020-08-16 23:11:38 · 191 阅读 · 0 评论 -
HTML5动画----canvas基础6(2定义颜色和样式、绘制图案)
定义颜色和样式:context.fillStyle 和 context.strokeStyle//填充和轮廓的颜色:context.fillStyle="red" context.strokeStyle="dark"; //线型:线条的粗细、端点样式、两线段连接处样式、绘制交点的方式lineWidth,lineCap,lineJoin,miterLimit function draw(){ var ctx = document.g...原创 2020-08-16 23:08:20 · 277 阅读 · 0 评论 -
HTML5动画----canvas基础6(1绘制渐变)
线性渐变:ctx.createLinearGradient(x1,y1,x2,y2); <script type="text/javascript">//1.线性渐变:lineargradient=ctx.createLinearGradient(x1,y1,x2,y2); x1,y1为线性渐变的起点,x2,y2为线性渐变的终点 // lineargradient.addColorStop(position,color); //定义色标的位置并上色 func...原创 2020-08-16 22:54:09 · 308 阅读 · 0 评论 -
HTML5动画----canvas基础5(组合与裁切)
组合:context.globalCompositeOperation属性<canvas id="myCanvas" width="300" height="200" style="border: 1px solid;"></canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var con...原创 2020-08-16 22:48:45 · 136 阅读 · 0 评论 -
HTML5动画----canvas基础4(矩阵变换--复杂变换)
上节的普通变换,其实就是 矩阵变换的特例,仅此而已context.transform(m11,m12,m21,m22,dx,dy)//context.setTransform(m11,m12,m21,m22,dx,dy)//将当前的矩阵进行重置为最初的矩阵,然后以相同的参数调用transform(),即先set(重置)再transform(变换)移动context.translate(x,y)=>context.transform(0,1,1,0,dx,dy)//context.tr..原创 2020-08-16 22:37:11 · 504 阅读 · 0 评论 -
HTML5动画----canvas基础3(变换图形--普通变换)
Canvas状态指的是当前画面所有样式、变形和裁切的一个快照,以堆(Stack)的方式保存。context.save();暂时把状态(各种属性的值,如strokeStyle,fillStyle,globalComositeOperation等,当前应用的变形,当前的裁切路径等)保存在堆中context.restore();把保存的状态从堆中取出,恢复该状态的所有设置。<...原创 2019-06-30 23:09:02 · 413 阅读 · 0 评论 -
HTML5动画----canvas基础2(绘制贝塞尔曲线)
贝塞尔曲线图能够绘制出复杂的图形,主要用于数值分析领域或者产品设计和动画制作领域绘制二次方曲线:context.quadraticCurveTo(cpx,cpy,x,y)<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>...原创 2019-06-30 17:17:38 · 1096 阅读 · 0 评论 -
HTML5动画----canvas基础1(绘制基本图形)
Canvas API应用前景极为广泛,通过canvas元素在网页中创建一块矩形区域,这块区域称为画布,在其中可以绘制各种图形<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> &...原创 2019-06-30 11:49:33 · 259 阅读 · 0 评论