HTML5一步一步走——Canvas画布(4)
日期：2014-05-17 浏览次数：20754 次
HTML5一步一步走——Canvas画布(四)
绘制第一个图形：
<canvas width="1200" height="800" >
当前浏览器不支持Canvas<!--当浏览器不支持canvas时显示的文本提示信息-->
</canvas>
需要借助javascript来完成：
代码如下：代码采用了jquery的预加载方法$(function(){})
通过如上的代码就可以实现绘制了两个矩形图，并且有一个具有透明度的。
图如：
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的基础上使用。
例如：
绘制第一个图形：
<canvas width="1200" height="800" >
当前浏览器不支持Canvas<!--当浏览器不支持canvas时显示的文本提示信息-->
</canvas>
需要借助javascript来完成：
代码如下：代码采用了jquery的预加载方法$(function(){})
通过如上的代码就可以实现绘制了两个矩形图，并且有一个具有透明度的。
图如：
--context.fillRect(x,y,w,h);//填充矩形区域
--context.strokeRect(x,y,w,h);//填充矩形的边界区域
--context.clearRect(x,y,w,h);//clearRect相当于相橡皮擦，把矩形的内容把擦掉
Colors颜色的定义方式有：
方法 值
Hexadecimal(十六进制)#ff0000hexadecimal(简写的十六进制)#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的基础上使用。
例如：
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
