程序设计HTML5 Canvas API


Posted in HTML / CSS onApril 08, 2013

复制代码
代码如下:

<script type="text/javascript">
try
{
document.createElement("Canvas").getContext("2d");
document.getElementById("support").innerHTML = "OK";
}
catch (e)
{
document.getElementById("support").innerHTML = e.message;
}
</script>

加入Canvas

<canvas id="diagonal" style="border:1px solid blue;" width="200" height="200"/>

复制代码
代码如下:

//取得Canvas元素及其绘图上下文var canvas = document.getElementById("diagonal");
var context = canvas.getContext("2d");
//用绝对坐标来创建一条路径
context.beginPath();
context.moveTo(70, 140);
context.lineTo(140, 70);
//将这条线绘制到Canvas上
context.stroke();

变换

可以通过变换(缩放、平移、旋转)等达到和上面相同的效果。

用变换的方式绘制对角线

复制代码
代码如下:

//取得Canvas元素及其绘图上下文
var canvas = document.getElementById("diagonal");
var context = canvas.getContext("2d");
//保存当前绘图状态
context.save();
//向右下方移动绘图上下文
context.translate(70, 140);
//以原点为起点,绘制与前面相同的线段
context.beginPath();
context.moveTo(0, 0);
context.lineTo(70, -70);
context.stroke();</p> <p>context.restore();

路径

HTML5 Canvas API中的路径代表你希望呈现的任何形状。

beginPath():不论开始绘制何种图形,第一个需要调用的就是beginPath。这个简单的函数不带任何参数,它用来通知canvas将要开始绘制一个新的图形了。

moveTo(x,y):不绘制,将当前位置移动到新的目标坐标(x,y)。

lineTo(x,y):不仅将当前位置移动到新的目标坐标(x,y),而且在两个坐标之间画一条直线。

closePath():这个函数行为和lineTo很像,唯一的差别在于closePath会将路径的起始坐标自动作为目标坐标。它还会通知canvas当前绘制的图形已经闭合或者形成了完全封闭区域,这对将来的填充和描边都非常有用。

绘制一个松树地树冠

复制代码
代码如下:

function createCanopyPath(context) {
// Draw the tree canopy
context.beginPath();</p> <p>context.moveTo(-25, -50);
context.lineTo(-10, -80);
context.lineTo(-20, -80);
context.lineTo(-5, -110);
context.lineTo(-15, -110);</p> <p>// 树的顶点
context.lineTo(0, -140);</p> <p>context.lineTo(15, -110);
context.lineTo(5, -110);
context.lineTo(20, -80);
context.lineTo(10, -80);
context.lineTo(25, -50);
// 连接起点,闭合路径
context.closePath();
}</p> <p>function drawTrails() {
var canvas = document.getElementById('diagonal');
var context = canvas.getContext('2d');</p> <p>context.save();
context.translate(130, 250);</p> <p>// 创建表现树冠的路径
createCanopyPath(context);</p> <p>// 绘制当前路径
context.stroke();
context.restore();
}</p> <p>window.addEventListener("load", drawTrails, true);

描边样式

通过描边模式,可以让树冠看起来更加真实。

复制代码
代码如下:

//加宽线条
context.lineWidth = 4;
//平滑路径的接合点
context.lineJoin = 'round';
//颜色
context.strokeStyle = '#663300';
// 绘制当前路径
context.stroke();

填充样式

context.fillStyle = "#339900"; context.fill();

绘制矩形

我们给树增加树干

context.fillStyle = '#663300'; context.fillRect(-5, -50, 10, 50);

绘制曲线

复制代码
代码如下:

context.save();
context.translate(-10, 350);
context.beginPath();</p> <p>// 第一条曲线向右上方弯曲
context.moveTo(0, 0);
context.quadraticCurveTo(170, -50, 260, -190);</p> <p>// 向右下方弯曲
context.quadraticCurveTo(310, -250, 410, -250);</p> <p>// Draw the path in a wide brown stroke
context.strokeStyle = '#663300';
context.lineWidth = 20;
context.stroke();</p> <p>// Restore the previous canvas state
context.restore();

在Canvas中插入图片

必须等到图片完全加载后才能对其进行操作。浏览器通常会在页面脚本执行时异步加载图片,如果试图在图片未完全加载之前就将其呈现到canvas上,那么 canvas将不会显示任何图片,因此,特别注意,在呈现之前,应确保图片已加载完毕。

复制代码
代码如下:

// 加载图片
var bark = new Image();
bark.src = "bark.jpg";</p> <p>// 图片加载完成后,再调用绘图的函数
bark.onload = function () {
drawTrails();
}

显示图片:

//用背景图案填充,作为树干的背景 context.drawImage(bark, -5, -50, 10, 50);

渐变

使用渐变需要三个步骤:

(1)创建渐变对象

(2)为渐变对象设置颜色,指明过渡方式

(3)在context上为填充样式或者描边样式设置渐变

复制代码
代码如下:

// 创建用作树干纹理的三阶水平渐变
var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);</p> <p>// 树干的左侧边缘是一般程度的棕色
trunkGradient.addColorStop(0, '#663300');</p> <p>// 树干中间偏左的位置颜色要谈一些
trunkGradient.addColorStop(0.4, '#996600');</p> <p>// 右侧边缘的颜色要深一些
trunkGradient.addColorStop(1, '#552200');</p> <p>// 使用渐变填充树干
context.fillStyle = trunkGradient;
context.fillRect(-5, -50, 10, 50);
// 创建垂直渐变,以用树冠在树干上的投影
var canopyShadow = context.createLinearGradient(0, -50, 0, 0);
// 投影渐变的起点是透明度为50%的黑色
canopyShadow.addColorStop(0, 'rgba(0, 0, 0, 0.5)');
// 方向垂直向下,渐变在很短的距离内迅速渐变到完全透明,这段长度之外
//的树干上没有投影
canopyShadow.addColorStop(0.2, 'rgba(0, 0, 0, 0.0)');</p> <p>// 在树干上填充投影渐变
context.fillStyle = canopyShadow;
context.fillRect(-5, -50, 10, 50);

背景图

复制代码
代码如下:

// 加载图片
var gravel = new Image();
gravel.src = "gravel.jpg";
gravel.onload = function () {
drawTrails();
}</p> <p>// 用背景图替代棕色粗线条
context.strokeStyle = context.createPattern(gravel, 'repeat');
context.lineWidth = 20;
context.stroke();

context.createPattern的第二个参数是重复性标记,可以在表2-1中选择合适的值。

平铺方式 意义
repeat (默认值)图片会在两个方向平铺
repeat-x 横向平铺
repeat-y 纵向平铺
no-repeat 图片只显示一次,不平铺

 缩放

缩放函数context.scale(x,y):x,y分别代表在x,y两个维度的值。每个参数在canvas显示图像的时候,向其传递在本方向轴上图像要放大(或缩小)的量。如果x值为2,就代表所绘制图像中全部元素会变成两倍宽,如果y值为0。5,绘制出来的图像会变成之前的一半高。

复制代码
代码如下:

// 在 X=130, Y=250 处绘制第一棵树
context.save();
context.translate(130, 250);
drawTree(context);
context.restore();</p> <p>// 在 X=260, Y=500 处绘制第二棵树
context.save();
context.translate(260, 500);</p> <p>// 将第二棵树的高宽放大到原来的2倍
context.scale(2, 2);
drawTree(context);
context.restore();

旋转

旋转图像

复制代码
代码如下:

context.save();
//旋转角度参数以弧度为单位
context.rotate(1.57);
context.drawImage(myImage, 0, 0, 100, 100);</p> <p>context.restore();

一种变换的使用方法

复制代码
代码如下:

// 保存当前状态
context.save();</p> <p>// X值随着Y值增加而增加,借助拉伸变换,
// 可以创建一棵用作阴影的倾斜的树
// 应用了变换以后,所有坐标都与矩阵相乘
context.transform(1, 0,
-0.5, 1,
, 0);</p> <p>// 在Y轴方向,将阴影高度变为原来的60%
context.scale(1, 0.6);</p> <p>// 使用透明度为20%的黑色填充树干
context.fillStyle = 'rgba(0, 0, 0, 0.2)';
context.fillRect(-5, -50, 10, 50);</p> <p>// 使用已有的阴影效果重新绘制树
createCanopyPath(context);
context.fill();</p> <p>// 恢复之前的canvas状态
context.restore();

文本

context.fillText(text,x,y,maxwidth):text文本内容,x,y指定文本位置,maxwidth是可选参数,限制文本位置。
context.strokeText(text,x,y,maxwidth):text文本内容,x,y指定文本位置,maxwidth是可选参数,限制文本位置。

复制代码
代码如下:

// 在canvas上绘制文本
context.save();</p> <p>// 字号为60,字体为Impact
context.font = "60px impact";</p> <p>//填充颜色
context.fillStyle = '#996600';
//居中
context.textAlign = 'center';</p> <p>//绘制文本
context.fillText('Happy Trails!', 200, 60, 400);
context.restore();

阴影

 可以通过几种全局context属性来控制阴影

属性  值  备注
shadowColor  任何CSS中的颜色值 可以使用透明度(alpha)
shadowOffsetX 像素值  值为正数,向右移动阴影;为负数,向左移动阴影
shadowOffsetY 像素值 值为正数,向下移动阴影;为负数,向上移动阴影
shadowBlur 高斯模糊值 值越大,阴影边缘越模糊

复制代码
代码如下:

// 颜色黑色,20%透明度
context.shadowColor = 'rgba(0, 0, 0, 0.2)';</p> <p>// 向右移动15px,向左移动10px
context.shadowOffsetX = 15;
context.shadowOffsetY = -10;</p> <p>// 轻微模糊阴影
context.shadowBlur = 2;

像素数据

 context.getImageData(sx, sy, sw, sh):sx,xy确定一个点,sw:宽度,sh:高度。

这个函数返回三个属性:width 每行有多少个像素  height 每列有多少个像素

                                 data 一堆数组,存有从canvas获取的每个像素的RGBA值(值红、绿、蓝和透明度)。

context.putImageData(imagedata,dx,dy):允许开发人员传入一组图像数据,dx,dy用来指定偏移量,如果使用,则该函数就会跳到指定的canvas位置去更新

显示传进来的像素数据。

canvas.toDataUrl:可以通过编程获取canvas上当前呈现的数据,获得的数据以文本格式保存,浏览器能将其解析成图像。

 

HTML / CSS 相关文章推荐
用CSS禁用输入法(CSS3 UI规范)实例解析
Dec 04 HTML / CSS
纯css3(无图片/js)制作的几个社交媒体网站的图标
Mar 21 HTML / CSS
css3实现多个元素依次显示效果
Dec 12 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
Apr 29 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
Jul 07 HTML / CSS
解析HTML5中的新功能本地存储localStorage
Mar 01 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
Aug 22 HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 16 HTML / CSS
CSS3中Animation实现简单的手指点击动画的示例
Jul 15 HTML / CSS
css3中transform属性实现的4种功能
Aug 07 HTML / CSS
html5与css3小应用
Apr 03 #HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 #HTML / CSS
html5 拖拽上传图片实例演示
Apr 01 #HTML / CSS
html5 跨文档消息传输示例探讨
Apr 01 #HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 #HTML / CSS
检测浏览器是否支持html5视频的代码
Mar 28 #HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
Mar 25 #HTML / CSS
You might like
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
2013/01/17 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
关于angularJs清除浏览器缓存的方法
2017/11/28 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
js尾调用优化的实现
2019/05/23 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
详解tensorflow实现迁移学习实例
2018/02/10 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
自我评价的范文
2014/02/02 职场文书
婚庆司仪主持词
2014/03/15 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
征用土地赔偿协议书
2014/09/26 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
捐资助学感谢信
2015/01/21 职场文书
小学教师个人总结
2015/02/05 职场文书
文案策划岗位职责
2015/02/11 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书
解决thinkphp6(tp6)在状态码500下不报错,或者显示错误“Malformed UTF-8 characters”的问题
2021/04/01 PHP
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS