HTML5画布(CANVAS)速查简表
>HTML5画布(Canvas)元素
<canvas id="myCanvas" width="500" height="300">
浏览器不支持画布(canvas)时的备案
<canvas id="myCanvas" width="500" height="300">your browser doesn't support canvas! </canvas>
2d context
var context = canvas.getContext('2d');
Webgl context (3d)
var context = canvas.getContext('webgl');
图形
绘制方形
context.rect(x, y, width, height); context.fill(); context.stroke();
填充区域
context.fillRect(x, y, width, height);
绘制方形的边框
context.strokeRect(x, y, width, height);
绘制圆形
context.arc(x, y, radius, 0, Math.PI * 2); context.fill(); context.stroke();
风格
填充
context.fillStyle = 'red'; context.fill();
勾勒
context.strokeStyle = 'red'; context.stroke();
线性渐变
var grd = context.createLinearGradient(x1, y1, x2, y2); grd.addColorStop(0, 'red'); grd.addColorStop(1, 'blue'); context.fillStyle = grd; context.fill();
径向渐变
var grd = context.createRadialGradient(x1, y1, radius1, x2, y2, radius2); grd.addColorStop(0, 'red'); grd.addColorStop(1, 'blue'); context.fillStyle = grd; context.fill();
图案
var imageObj = new Image(); imageObj.onload = function() {var pattern = context.createPattern(imageObj, 'repeat');context.fillStyle = pattern;context.fill(); }; imageObj.src = 'path/to/my/image.jpg';
交点
context.lineJoin = 'miter|round|bevel';
线头
context.lineCap = 'butt|round|square';
阴影
context.shadowColor = 'black'; context.shadowBlur = 20; context.shadowOffsetX = 10; context.shadowOffsetY = 10;
Alpha (透明)
context.globalAlpha = 0.5; // between 0 and 1
颜色格式
字符串
context.fillStyle = 'red';
16进制
context.fillStyle = '#ff0000';
16进制简写
context.fillStyle = '#f00';
RGB
context.fillStyle = 'rgb(255,0,0)';
RGBA
context.fillStyle = 'rgba(255,0,0,1)';
路径
开始路径
context.beginPath();
画线
context.lineTo(x, y);
弧形
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
二次曲线
context.quadraticCurveTo(cx, cy, x, y);
二次曲线
context.bezierCurveTo(cx1, cy1, cx2, cy2, x, y);
关闭路径
context.closePath();
图片
画图
var imageObj = new Image(); imageObj.onload = function() {context.drawImage(imageObj, x, y); }; imageObj.src = 'path/to/my/image.jpg';
指定尺寸画图
var imageObj = new Image(); imageObj.onload = function() {context.drawImage(imageObj, x, y, width, height); }; imageObj.src = 'path/to/my/image.jpg';
裁剪图片
var imageObj = new Image(); imageObj.onload = function() {context.drawImage(imageObj, sx, sy, sw, sh, dx, dy, dw, dh); }; imageObj.src = 'path/to/my/image.jpg';
文本
写文字
context.font = '40px Arial'; context.fillStyle = 'red'; context.fillText('Hello World!', x, y);
写镂空文字
context.font = '40pt Arial'; context.strokeStyle = 'red'; context.strokeText('Hello World!', x, y);
粗体
context.font = 'bold 40px Arial';
斜体
context.font = 'italic 40px Arial';
对齐方式
context.textAlign = 'start|end|left|center|right';
文字基线
context.textBaseline = 'top|hanging|middle|alphabetic|ideographic |bottom';
获取文本宽度
var width = context.measureText('Hello world').width;
动画
移动
context.translate(x, y);
扩大缩小
context.scale(x, y);
旋转
context.rotate(radians);
水平翻转
context.scale(-1, 1);
上下翻转
context.scale(1, -1);
自定义变换
context.transform(a, b, c, d ,e, f);
设置变换
context.setTransform(a, b, c, d ,e, f);
切割
context.transform(1, sy, sx, 1, 0, 0);
重置
context.setTransform(1, 0, 0, 1, 0, 0);
状态存储
存储
context.save();
恢复
context.restore();
裁剪
裁剪
// draw path here context.clip();
图像数据
获取图像数据
var imageData = context.getImageData(x, y, width, height); var data = imageData.data;
遍历像素点
var imageData = context.getImageData(x, y, width, height); var data = imageData.data; var len = data.length; var i, red, green, blue, alpha;for(i = 0; i < len; i += 4) {red = data[i];green = data[i + 1];blue = data[i + 2];alpha = data[i + 3]; }
沿坐标遍历像素点
var imageData = context.getImageData(x, y, width, height); var data = imageData.data; var x, y, red, green, blue, alpha;for(y = 0; y < imageHeight; y++) {for(x = 0; x < imageWidth; x++) {red = data[((imageWidth * y) + x) * 4];green = data[((imageWidth * y) + x) * 4 + 1];blue = data[((imageWidth * y) + x) * 4 + 2];alpha = data[((imageWidth * y) + x) * 4 + 3];} }
设置图像数据
context.putImageData(imageData, x, y);
DATA URLS
获取Data URL
var dataURL = canvas.toDataURL();
使用Data URL生成图像
var imageObj = new Image(); imageObj.onload = function() {context.drawImage(imageObj, 0, 0); };imageObj.src = dataURL;
合成
合成操作
context.globalCompositeOperation = 'source-atop|source-in|source-out|source-over|destination-atop|destination-in|destination-out|destination-over|lighter|xor|copy';
HTML5画布(CANVAS)速查简表相关推荐
- 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技术开始出现在各种网站上.这些最新的网页技术究竟能给我们今后的 ...
- 电脑PHP动画制作画板,三分钟HTML5画布(Canvas)动画教程
此文下面的教程中将使用的是另外一个叫做kinetic的Web动画工具包. 它们都是开源的. 把鼠标放到上面的小丑脸上,然后移开,就会有如下效果. 第一步,画五官 这个小丑没有耳朵和眉毛,所以只剩下三官 ...
- 用html5写一段文字画布中,10个让人惊叹的HTML5画布(canvas)技术效果
随着老式浏览器(IE6,IE8)的逐渐淘汰,现代浏览器(火狐浏览器,谷歌浏览器,Opera,Safari)走向主流,越来越多的HTML5和CSS3技术开始出现在各种网站上.这些最新的网页技术究竟能给我 ...
- html5画布作品,10款面向HTML5 画布(Canvas)的JavaScript库
Processing.js Processing.js是一个开放的编程语言,在不使用Flash或Java小程序的前提下,可以实现程序图像.动画和互动的应用.Processing.js是轻量,易于了解掌 ...
- HTML5画布Canvas线段、矩形、弧形及贝塞尔曲线等简单图形绘制
tip:有问题或者需要大厂内推的+我脉脉哦:丛培森 ٩( 'ω' )و HTML5中最有意思的就是这个canvas了 通过它我们可以画自己想要的图形 它也是十分重要的技术 应用于游戏.图表等等 或者绘 ...
最新文章
- 人工智能创业指南:AI 产品未来的发展模式及策略
- pytorch 入门基础
- Bootstrap整合ASP.NET MVC验证、jquery.validate.unobtrusive
- 1103: [POI2007]大都市meg(dfs序+线段树||树状数组)
- LeetCode 376. 摆动序列(贪心 动态规划)
- ubuntu进行apt-get时候出现Package ssh is not available, but is referred to by another package 错误...
- 【汇编优化】之linux下如何利用gdb调试汇编代码
- php floatval_php floatval()函数的用法详解
- 关于QT中的音频通信问题
- 如何看待职场猝死?燕麦企业云盘教你9大绝招提升职场幸福感
- Unity3D隐藏启动logo
- 硬件设计1:常用元器件的选型理论依据
- 用ccs创建一个工程文件
- 企业上云要几步?中拓互联奉送企业上云全攻略
- (˙﹏˙) 开工~~~~~~
- c语言作业素数探求实验题,c语言课程设计-素数探求.doc
- 基于bootstrap的富文本框——wangEditor【欢迎增加开发】
- java分子分母的加减乘除_加减乘除四则运算
- 第一数字定律识别数据作假
- UVA 1438 - Asteroids(三维凸包)
热门文章
- POJ1422 最小路径覆盖
- 【Android 逆向】整体加固脱壳 ( 脱壳点简介 | 修改系统源码进行脱壳 )
- 【计算理论】图灵机 ( 接受状态作用 | 格局 | 图灵机语言 | 图灵机设计复杂性 )
- Python与用户的交互 ,格式化输出的三种方式
- python 获取子目录下的所有文件的路径
- maven 常用插件3
- C# System.Reflection (反射)
- 实现Unity编辑器模式下的旋转
- 汇编: mul乘法指令(字乘法结果在dx:ax中,8位乘法:一个乘数默认放在al中)
- main函数的参数详解,它们是何时何处传入的?(main函数的参数值是从操作系统命令行上获得的)