canvas技术整理
canvas技术整理
1 html 2 <canvas id= "canvas"></canvas> 3 4 javascript 5 var canvas = document.getElementById('canvas') 6 var context =canvas.getContext('2d') 7 //使用context进行绘制 8 9 canvas.width 10 canvas.height 11 canvas.getContext('2d') 12 13 moveTo(x,y) 14 lineTo(x,y) 15 beginPath() 16 closePath() 17 18 lineWith //线条宽度 19 strokeStyle //线条样式 20 fillStyle //填充颜色 21 stroke() //绘制 22 fill() //填充 23 24 rect(x,y,width,height) //勾勒矩形边框路径 25 fillRect(x,y,width,height) //填充矩形 26 strokeRect(x,y,width,height) //绘制带边框的路径 27 28 //线条属性 29 lineWith //线条宽度 30 lineCap="butt"(default) //线条帽子的形状 31 "round" 圆形 32 "square" 方形 33 lineJion="miter"(default) 尖角 34 "bevel" 斜切 35 "round" 圆角 36 miterLimit 37 38 //图形变换 39 save() 40 restore() 41 42 translate(x,y) 43 rotate(deg) 44 scale(sx,sy) 45 46 //变换矩阵 47 [a c e] [水平缩放(1) 垂直倾斜(0) 水平位移(0)] 48 [b d f] [水平倾斜(0) 垂直缩放(1) 垂直位移(0)] 49 [0 0 1] 50 transfrom(a,b,c,d,e,f) //效果会累加 51 setTransform(a,b,c,d,e,f) //仅使用该效果 52 53 //渐变色和纹理 54 fillStyle = color / gradient / image / canvas / video 55 color格式:#ffffff / #642 / rgb / rgba / hsl / hsla / red 56 gradient格式:Linear Gradient(线性渐变) 57 var grd = context.createLinearGradient(xstart,ystart,xend,yend); 58 Radial Gradient(径向渐变) 59 var grd = context.createRadialGradient(xstart,ystart,xend,yend); 60 grd.addColorStop(stop,color); 61 image||canvas||video格式: 62 createPattern(img / canvas / video , repeat-style) 63 repeat-style:no-repeat / repeat-x / repeat-y / repeat 64 65 //曲线的绘制 66 context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=false) 67 context.crcTo(x1,y1,x2,y2,radius) 68 69 context.quadraticCurveTo(x1,y1, //控制点 70 x2,y2) //结束点 71 context.bezeirCurveTo(x1,y1,x2,y2, //控制点 72 x3,y3) //结束点 73 74 //文字渲染 75 context.font="bold 40px Arial" 76 context.fillText(string,x,y,[maxlen]); 77 context.strokeText(string,x,y,[maxlen]); 78 79 font 80 默认值:"20px sans-serif" 81 context.font = font-style font-variant font-weight font-size font-family 82 font-style: normal (Default) 83 italic (斜体字) 84 oblique (倾斜字体) 85 font-variant:normal (Default) 86 small-caps (以英文小写显示大写字母) 87 font-weight: lighter 88 normal (Deafult) 89 bold 90 bolder 91 100,200,300,400(normal),500,600,700(bold),800,900 92 font-size: 20px (Deafult) 93 2em 94 150% 95 xx-small x-small medium large x-large xx-large 96 font-famly: 设置多种字体备选 / 支持@font-face / web安全字体 97 context.textAlign = left / center / right 98 context.textBaseline = top / middle / bottom (垂直对齐) 99 alphabetic(Deafult) (基于拉丁字母设计的垂直对齐) 100 ideographic (基于方块字体设计的垂直对齐) 101 hanging (基于印度语设计的垂直对齐) 102 103 //图片 104 drawImage(image,dx,dy) 105 drawImage(image,dx,dy,dw,dh) 106 drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh) 107 dx,dy:image在canvas中定位的坐标值; 108 dw,dh:image在canvas中即将绘制区域的宽高;(相对于dx,dy坐标的偏移量) 109 sx,sy:image在canvas中所要绘制的起始位置; 110 sw,sh:image在canvas中所要绘制区域的宽高;(相对于sx,sy坐标的偏移量) 111 getImageData(x,y,w,h) 112 putImageData(imgdata,dx,dy,sx,sy,sw,sh) 113 createImageData(sw,sh) 114 createImageData(imagedata) 115 116 //阴影 117 context.shadowColor 118 context.shadowOffsetX //X偏移 119 context.shadowOffsetY //Y偏移 120 context.shadowBlur //模糊 121 122 //高级 123 globalAlpha = 1 (默认值) 124 globalCompositeOperation = "source-over" (默认值) 125 参数:source-over destination-over lighter 126 source-atop destination-atop copy 127 source-in destination-in xor 128 source-out destination-out 129 130 //路径方向和剪纸效果 131 非零环绕原则 132 133 //剪辑区域 134 context.clip(); =>探照灯 135 136 //交互 137 context.clearRect(x,y,width,height) 138 context.isPointInPath(x,y)
转载于:https://www.cnblogs.com/huliang56/p/6376643.html
canvas技术整理相关推荐
- Python GUI编程-了解相关技术[整理]
Python GUI编程-了解相关技术[整理] 我们可以看到,其实python进行GUI开发并没有自身的相关库,而是借用第三方库进行开发.tkinter是tcl/tk相关,pyGTK是Gtk相关,wx ...
- Java成神之路技术整理
转载自 Java成神之路技术整理 以下是Java技术栈微信公众号发布的所有关于 Java 的技术干货,会从以下几个方面汇总,本文会长期更新. Java 基础篇 Java 集合篇 Java 多线程篇 J ...
- html5画布作品,10个会让你惊叹不已的HTML5画布(CANVAS)技术应用演
下面的这是10个HTML5画布(canvas)技术效果演示一定会让你惊叹不已.当然,也许你也会认为,过去在老式浏览器中用flash技术也能实现这样的效果.但是,下面的这些演示只使用了现代浏览器里自带技 ...
- html5好看画布,10个会让你惊叹不已的HTML5画布(CANVAS)技术应用演
下面的这是10个HTML5画布(canvas)技术效果演示一定会让你惊叹不已.当然,也许你也会认为,过去在老式浏览器中用flash技术也能实现这样的效果.但是,下面的这些演示只使用了现代浏览器里自带技 ...
- html画布设计,10个会让你惊叹不已的HTML5画布(canvas)技术应用
随着老式浏览器(IE6)的逐渐淘汰,现代浏览器(火狐浏览器,谷歌浏览器,Opera,Safari)走向主流,越来越多的HTML5和CSS3技术开始出现在各种网站上.这些最新的网页技术究竟能给我们今后的 ...
- 未来技术 html5 app,未来web浏览技术提前体验:10个会让你惊叹不已的HTML5画布(canvas)技术应用演示...
随着老式浏览器(IE6,IE8)的逐渐淘汰,现代浏览器(火狐浏览器,谷歌浏览器,Opera,Safari)走向主流,越来越多的HTML5和CSS3技术开始出现在各种网站上.这些最新的网页技术究竟能给我 ...
- html5 2020视觉效果,体验未来:10个会让你惊叹不已的HTML5画布(CANVAS)技术应用演示-UI博客精选...
随着老式浏览器(IE6)的逐渐淘汰,现代浏览器(火狐浏览器,谷歌浏览器,Opera,Safari)走向主流,越来越多的HTML5和CSS3技术开始出现在各种网站上.这些最新的网页技术究竟能给我们今后的 ...
- 【安卓开发系列 -- APP】APP 开发基础技术整理
[安卓开发系列 -- APP]APP 开发基础技术整理 [1]Android Studio APP 项目目录布局 [2]活动的生命周期 活动的状态 : 1. 运行状态,一个活动位于返回栈栈顶时,活动 ...
- 鸿蒙OS架构及关键技术整理
鸿蒙OS架构及关键技术整理 一. 鸿蒙OS整体介绍 二. 子系统架构 三. 关键技术 四. 参考资料 一. 鸿蒙OS整体介绍 HarmonyOS简介 原作者:xiangzhihong8 前两天,华为发 ...
最新文章
- 背水一战 Windows 10 (83) - 用户和账号: 数据账号的添加和管理, OAuth 2.0 验证
- android CMake开发
- python【Matlibplot绘图库】绘制用于学术论文投稿的黑白图片
- 水系影像分析_“天眼”助力 甘肃运用卫星影像精准研判灾情
- 可变分区存储管理实验报告总结_操作系统第5次实验报告:内存管理
- android 7.0 更新apk,Android更新apk兼容7.0和8.0
- 前端-----盒子模型
- 软件性能测试与LoadRunner实战可以在网上和书店买到了
- Error:No cached version of com.android.tools.build:gradle:2.0.0 available for offline mode
- Weka--Explorer基本流程
- php+xls加密,POI Excel xlsx加密
- Base64系列第一篇 Base64介绍
- javascript--贪食蛇(完整版-逻辑思路)
- 基础: 有效值、RMS、振幅、幅度概念
- 美颜SDK是什么意思?美颜SDK可以用在哪些地方?
- Aggressive cows(c语言)
- 七巧板复原之剩余区域的计算-多边形的加减法计算
- javaIO流详解--读取,写入文件的所有类与方法
- js原生写时间日期选择
- (三)深入理解蓝牙BLE之“信道管理”
热门文章
- 链表、头指针、头结点
- c语言中post协议,c/c++的http协议的get和post方法
- python 从大到小循环_python算法(3) 插入排序
- Dart 7-Day
- R7-9 模拟EXCEL排序 (25 分)
- 最小生成树之普里姆算法(Prim算法)
- STM32(一)----建立嵌入式STM32工程
- mysql 时间函数大全_mysql常用的日期函数汇总
- fat32 linux 打包工具_一个方便的用于创建树莓派 SD 卡镜像的程序 | Linux 中国
- java_数组插入001