HTML5一步一步走——Canvas画布(4)-HTML教程-爱易网页

HTML5一步一步走——Canvas画布(4)

日期：2014-05-17　浏览次数：20670 次

HTML5一步一步走——Canvas画布(四)
绘制第一个图形：
<canvas width="1200" height="800" >
当前浏览器不支持Canvas
</canvas>

需要借助javascript来完成：
代码如下：代码采用了jquery的预加载方法$(function(){})

<span style="font-size:18px;"><span style="white-space:pre">	</span>$(function () {
            var canvas = document.querySelector("canvas");//得到canvas对象
            var context = canvas.getContext('2d');//绘制2维图像，即绘制平面图像
            context.fillStyle = 'red';//填充方式，现在为颜色
            context.fillRect(0, 0, 800, 600);//矩形区域
            context.fillStyle = 'rgba(255,255,0,0.5)';//使用RGB+Alpha通道，即在标准的颜色上加上透明效果。
            context.fillRect(400, 200, 800, 600);
        });</span>

通过如上的代码就可以实现绘制了两个矩形图，并且有一个具有透明度的。
图如：

绘制矩形对象有三个方法：

--context.fillRect(x,y,w,h);//填充矩形区域
--context.strokeRect(x,y,w,h);//填充矩形的边界区域
--context.clearRect(x,y,w,h);//clearRect相当于相橡皮擦，把矩形的内容把擦掉

Colors颜色的定义方式有：

方法值

Hexadecimal(十六进制)#ff0000
hexadecimal(简写的十六进制)#f00
rgb(标准颜色)rgb(255,0,0)
rgb(parcent)(以百分比的形式，指定标准颜色)rgb(100%,0%,0%)
rgba(标准颜色+alpha通道，即加透明效果)rgba(255,0,0,1.0)
rgba(以百分比指定标准颜色+alpha通道)rgba(100%,0%,0%,1.0)
hsl(色调(H)、饱和度(S)、亮度(L))hsl(0,100%,50%)
hsla(在hsl的基础上+alpha透明通道)hsla(0,100%,50%,1.0)
svg(named color)(以通用定义的标准名称来定义颜色)red

阴影效果：
shadow,在context的基础上使用。
例如：

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

HTML5一步一步走——Canvas画布(4)

相关资料更多>

推荐阅读更多>