体彩排列5双期走势图

站长网_站长创业_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: 使用HTML5捕捉音频与视频信息概述及实例
搜索:
您的位置: 主页 > 教程 > 网页设计 > html5 > » 正文

HTML5 canvas基本绘图之绘制矩形

来源: 易采站长站

<canvas></canvas>只是一个绘制图形的容器,除了id、class、style等属性外,还有height和width属性。在<canvas>>元素上绘图主要有三步:

1.获取<canvas>元素对应的DOM对象,这是一个Canvas对象;
2.调用Canvas对象的getContext()方法,得到一个CanvasRenderingContext2D对象;
3.调用CanvasRenderingContext2D对象进行绘图。

体彩排列5双期走势图绘制矩形rect()、fillRect()和strokeRect()

 •context.rect( x , y , width , height ):只定义矩形的路径;
 •context.fillRect( x , y , width , height ):直接绘制出填充的矩形;
 •context.strokeRect( x , y , width , height ):直接绘制出矩形边框;

JavaScript Code复制内容到剪贴板
  1. <script type="text/javascript">        var canvas = document.getElementById("canvas");   
  2.     var context = canvas.getContext("2d");      
  3.     //使用rect方法        context.rect(10,10,190,190);   
  4.     context.lineWidth = 2;        context.fillStyle = "#3EE4CB";   
  5.     context.strokeStyle = "#F5270B";        context.fill();   
  6.     context.stroke();      
  7.     //使用fillRect方法        context.fillStyle = "#1424DE";   
  8.     context.fillRect(210,10,190,190);      
  9.     //使用strokeRect方法        context.strokeStyle = "#F5270B";   
  10.     context.strokeRect(410,10,190,190);      
  11.     //同时使用strokeRect方法和fillRect方法        context.fillStyle = "#1424DE";   
  12.     context.strokeStyle = "#F5270B";        context.strokeRect(610,10,190,190);   
  13.     context.fillRect(610,10,190,190);    </script>   
  14.   

这里需要说明两点:第一点就是stroke()和fill()绘制的前后顺序,如果fill()后面绘制,那么当stroke边框较大时,会明显的把stroke()绘制出的边框遮住一半;第二点:设置fillStyle或strokeStyle属性时,可以通过“rgba(255,0,0,0.2)”的设置方式来设置,这个设置的最后一个参数是透明度。

Tags:
最新图文资讯
1 2 3 4 5 6
体彩排列5双期走势图相关的文章列表:
体彩排列3双期走势图 福彩七乐彩中奖规则 福彩3D走势图 河南福彩22选5走势图带连线 福彩双色球蓝球走势图 福彩东方6 1走势图 南粤风采36选7单期走势图 河南彩票走势图 河南福彩22选5 河南福彩22选5复式计算表 体彩超级大乐透后区除三走势图 东方6 1大小走势图 齐鲁风采23选5和值走势图 福彩双色球蓝球201走势图 东方6 1大小走势图 体彩超级大乐透周六走势图 体彩排列3出号频率表 体彩排列5走势图 体彩超级大乐透周六走势图 华东15选5和值走势图