资讯 安全 论坛 下载 读书 程序开发 数据库 系统 网络 电子书 微信学院 站长学院 QQ 考试
频道栏目
HTML 5| 安全资讯| 安全公告| 病毒预警| 人物| 企业招聘| 其他综合|
登录注册
首页 > 资讯 > HTML 5 > 正文

HTML5：Canvas

16-08-15        来源：[db:作者]  
收藏   我要投稿

canvas画图已经在JavaScript中介绍了。此处再进行补充。

1、颜色的指定方法

颜色指定有3种：第一种是以[#RRGGBB]这种与HTML中相同的颜色指定方法指定颜色。第二种方法为在rgb()中指定三个0~255范围的值；第三种方法是除了指定三个0~255范围的数值外，同时指定透明度（数值范围;0~1）。

 

context.fillStyle="#FF0000";  
context.fillStyle="rgb(255,0,0)";  
context.fillStyle="rgba(255,0,0,0.5)";

 

2、stroke()和fill()方法

stroke()方法绘制路径，fill()方法填充路径。例如：制作一个当用户触摸屏幕时在触摸位置绘制一个三角形的实例程序：

 
A Drawing of something <script> var drawing=document.getElementById("drawing"); //确定浏览器支持元素 if(drawing.getContext){ //取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); //设置canvas的onmouse事件 drawing.onmousedown=function(event){ //取得触摸处的坐标 var x=event.x; var y=event.y; var r=Math.random()*10+5; //路径指定 context.beginPath(); context.moveTo(x,y); context.lineTo(x,y+r); context.lineTo(x+r,y+r); context.lineTo(x,y); //绘图 context.strokeStyle="red"; //指定路径线的粗细 context.lineWidth=3; //绘制路径 context.stroke(); } } </script>

 

 
A Drawing of something <script> var drawing=document.getElementById("drawing"); //确定浏览器支持元素 if(drawing.getContext){ //取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); //路径绘制开始 context.beginPath(); //路径的绘制 context.moveTo(0,0); context.lineTo(0,100); context.lineTo(100,100); //路径绘制结束 context.closePath(); context.fillStyle="rgb(200,0,0)" context.fill(); } </script>

 

3、arcTo()方法

arcTo()方法用于绘制圆弧，context.arcTo(x1,y1,x2,y2,半径)。

 
A Drawing of something <script> var drawing=document.getElementById("drawing"); //确定浏览器支持元素 if(drawing.getContext){ //取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); //设置canvas的onmouse事件 //路径指定 context.beginPath(); //单独使用arcTo()方法必须指定绘图开始的基点 context.moveTo(20,20); context.arcTo(290,150,20,280,20); context.lineTo(20,280); //绘图 context.strokeStyle="red"; //指定路径线的粗细 context.lineWidth=3; //绘制路径 context.stroke(); } </script>

 

4、quadraticCurveTo()和bezierCurveTo()方法

quadraticCurveTo(cx,cy,x,y):从上一点开始绘制一条二次曲线，到(x,y)为止，并且以(cx,cy)作为控制点。

bezierCurveTo(c1x,c1y,c2x,c2y,x,y):从上一点开始绘制一条曲线，到（x,y）为 止，并且以(c1x,c1y)和(c2x,c2y)为控制的。

 
A Drawing of something <script> var drawing=document.getElementById("drawing"); //确定浏览器支持元素 if(drawing.getContext){ //取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); //设置canvas的onmouse事件 //路径指定 context.beginPath(); //单独使用bezierCurveTo()方法必须指定绘图开始的基点 context.moveTo(20,20); context.bezierCurveTo(100,280,180,280,280,20); //绘图 context.strokeStyle="red"; //指定路径线的粗细 context.lineWidth=3; //绘制路径 context.stroke(); } </script>

 

 

 
A Drawing of something <script> var drawing=document.getElementById("drawing"); //确定浏览器支持元素 if(drawing.getContext){ //取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); //设置canvas的onmouse事件 //路径指定 context.beginPath(); //单独使用quadraticCurveTo()方法必须指定绘图开始的基点 context.moveTo(20,20); context.quadraticCurveTo(40,80,130,150); //绘图 context.strokeStyle="red"; //指定路径线的粗细 context.lineWidth=3; //绘制路径 context.stroke(); } </script>

 

 

5、createRadialGradient()方法

使用createRadialGradient()方法，这个方法接收6个参数，对应着两个圆的圆心和半径。两个圆的圆心不同时的效果如下：

 
A Drawing of something <script> var drawing=document.getElementById("drawing"); //确定浏览器支持元素 if(drawing.getContext){ //取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); //设置渐变 var gradient=context.createRadialGradient(30,30,20,170,170,100); gradient.addColorStop(0,"red"); gradient.addColorStop(0.3,"yellow"); gradient.addColorStop(1,"blue"); //绘制渐变圆形 context.fillStyle=gradient; context.fillRect(20,20,260,260); } </script>

 

6、绘制图像

（1）、直接绘制:context.drawImage(image,dx,dy);

 

Image to use:

The Scream

Canvas:

A Drawing of something <script> var drawing=document.getElementById("drawing"); //确定浏览器支持元素 if(drawing.getContext){ //取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); var image=document.getElementById("scream"); image.onload = function() { context.drawImage(image,10,10); } } </script>

 

（2）、尺寸修改：:context.drawImage(image,dx,dy,dw,dh);

 

Image to use:

The Scream

Canvas:

A Drawing of something <script> var drawing=document.getElementById("drawing"); //确定浏览器支持元素 if(drawing.getContext){ //取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); var image=document.getElementById("scream"); image.onload = function() { context.drawImage(image,10,10,100,100); } } </script>

 

（3）、图像截取：:context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);

 

Image to use:

The Scream

Canvas:

A Drawing of something <script> var drawing=document.getElementById("drawing"); //确定浏览器支持元素 if(drawing.getContext){ //取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); var image=document.getElementById("scream"); image.onload = function() { context.drawImage(image,20,20,70,100,10,10,220,250); } } </script>

 

 

7、绘制数据图表

（1）、绘制方格图

 
A Drawing of something <script> var drawing=document.getElementById("drawing"); //确定浏览器支持元素 if(drawing.getContext){ //取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); //描绘背景 var gradient=context.createLinearGradient(0,0,0,300); gradient.addColorStop(0,"#e0e0e0"); gradient.addColorStop(1,"#ffffff"); context.fillStyle=gradient; context.fillRect(0,0,drawing.width,drawing.height); //描绘边框 var grid_cols=10; var grid_rows=10; var cell_height=drawing.height/grid_rows; var cell_width=drawing.width/grid_cols; context.lineWidth=1; context.strokeStyle="#a0a0a0"; //开始边框描绘 context.beginPath(); //准备画横线 for(var row=0;row<=grid_rows;row++){ var y=row*cell_height; context.moveTo(0,y); context.lineTo(drawing.width,y); } //准备画竖线 for(var col=0;col<=grid_cols;col++){ var x=col*cell_width; context.moveTo(x,0); context.lineTo(x,drawing.height); } //完成描述 context.stroke(); } </script>

 

（2）、数据表

 
A Drawing of something <script> //定义图表数据 var uriage=[80,92,104,110,68,50,45,90,74,68,98,103]; drawChart(uriage); //绘制折线数据图表的函数 function drawChart(data){ var drawing=document.getElementById("drawing"); //确定浏览器支持元素 if(drawing.getContext){ //取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); //描绘背景 var gradient=context.createLinearGradient(0,0,0,300); gradient.addColorStop(0,"#e0e0e0"); gradient.addColorStop(1,"#ffffff"); context.fillStyle=gradient; context.fillRect(0,0,drawing.width,drawing.height); //描绘边框 var grid_cols=data.length+1; var grid_rows=4; var cell_height=drawing.height/grid_rows; var cell_width=drawing.width/grid_cols; context.lineWidth=1; context.strokeStyle="#a0a0a0"; //开始边框描绘 context.beginPath(); //准备画横线 for(var row=0;row<=grid_rows;row++){ var y=row*cell_height; context.moveTo(0,y); context.lineTo(drawing.width,y); } //准备画竖线 for(var col=0;col<=grid_cols;col++){ var x=col*cell_width; context.moveTo(x,0); context.lineTo(x,drawing.height); } //完成描述 context.stroke(); context.closePath(); //获取数据中最大的值 var max_v=0; for(var i=0;imax_v) max_v=data[i]; } //为了能让最大值能容纳在图表内，计算坐标 max_v=max_v*1.1; //将数据换算为坐标 var points=[]; for(var i=0;i

 

8、移动与扩大/缩小

 
A Drawing of something <script> var drawing=document.getElementById("drawing"); //确定浏览器支持元素 if(drawing.getContext){ //取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); function drawRect(context,color){ context.fillStyle=color; context.fillRect(20,20,50,50); } //绘制普通的矩形 drawRect(context,"red"); //移动矩形以及扩大/缩小矩形 context.translate(30,30);//平行移动 context.scale(2.5,0.8);//长扩大2.5倍、宽缩小至0.8倍 drawRect(context,"blue");//绘制移动、扩大/缩小后的矩形 } </script>

 

9、canvas实现动画效果

（1）、圆球跳动的动画

 
A Drawing of something <script> var drawing=document.getElementById("drawing"); //确定浏览器支持元素 if(drawing.getContext){ //取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); //记录圆球的状态 var ball={x:10,y:100,dir_x:5,dir_y:5}; //动画 setInterval(drawBall,100); function drawBall(){ //绘制背景 context.fillStyle="#F5F5F5" context.fillRect(0,0,300,300); //绘制圆球 context.beginPath(); context.arc(ball.x,ball.y,5,0,2*Math.PI); context.fillStyle="blue"; context.fill(); //让圆球动起来 ball.x+=ball.dir_x; ball.y+=ball.dir_y; if(ball.x<0||ball.x>300){ball.dir_x*=-1;} if(ball.y<0||ball.y>300){ball.dir_y*=-1;} } } </script>

 

 

（2）待机动画

 
A Drawing of something <script> var drawing=document.getElementById("drawing"); //确定浏览器支持元素 if(drawing.getContext){ //取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); //动画绘制开始 var ci=0; anim(); //定义动画函数 function anim(){ context.clearRect(0,0,300,300);//清空canvas //循环绘制36根长方形棒棒 for(var i=0;i<36;i++){ context.save(); //旋转 var r=(i*10)*Math.PI/180;//度转换为弧度 context.translate(150,150);//移动中心店 context.rotate(r); //绘制细长方形 if(i==ci){ context.globalAlpha=1.0;//设置透明度 }else{ context.globalAlpha=0.3; } context.beginPath(); context.fillStyle="green"; context.rect(0,0,50,6); context.fill(); context.restore(); } ci=(ci+1)%36; //每隔20微秒调用函数本身，实现动画效果。 setTimeout(anim,20); } } </script>

 

 
点击复制链接 与好友分享!回本站首页
相关TAG标签
上一篇：java RxJava操作符创建型解析
下一篇：Libgdx之Table 表格排版
相关文章
热门专题推荐 vmware win7激活工具 win10激活工具 excel word office激活 小马激活工具 重装系统 数据恢复 u盘启动工具
图文推荐
文章
推荐
热门新闻
· 锤子坚果Pro发布后，罗永浩哭了
· 想实习的大学党看过来!这些科技巨头最
· 罗永浩锤子发布会抢先消息：锤子科技新
· Google新一代系统Fuchsia OS界面曝光
· 中国唯一连续运营20余年的网络游戏，还
· iPhone都便宜了 为何国产手机越来越贵
· 丢人！谷歌和Facebook竟被虚假企业电邮
· 中国移动支付震惊日本网友 为什么美国

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站