首页 前端知识 html5基础入门教程之canvas运用样式与颜色,前端开发大型网站

html5基础入门教程之canvas运用样式与颜色,前端开发大型网站

2024-05-20 14:05:12 前端知识 前端哥 53 461 我要收藏

ctx.fillStyle=‘blue’;

ctx.fillRect(50,50,75,50);

ctx.fillStyle=‘green’;

ctx.fillRect(80,80,75,50);

}

}

上面这个例子,红色的矩形是完全不透明的,因为在它之前并没有设置透明度。在红色矩形绘制完成后,设置了都明度为0.2,从而之后绘制的蓝色矩形和绿色矩形的透明度都受影响了。

2.rgba

由于strokeStyle和fillStyle都接受符合css3规范的颜色值,所以还可以使用另一种设置透明度的方法,那就是rgba()方法,它的灵活性更大。

rgba()示例:

rgba

function draw(){

var canvas=document.getElementById(‘test_rgba’);

if(canvas.getContext){

var ctx=canvas.getContext(‘2d’);

//绘制四个宽高为150*37.5的矩形,颜色分别为:黄、绿、蓝、红

ctx.fillStyle=‘rgb(255,221,0)’;

ctx.fillRect(10,0,150,37.5);

ctx.fillStyle=‘rgb(102,204,0)’;

ctx.fillRect(10,37.5,150,37.5);

ctx.fillStyle=‘rgb(0,153,255)’;

ctx.fillRect(10,75,150,37.5);

ctx.fillStyle=‘rgb(255,51,0)’;

ctx.fillRect(10,112.5,150,37.5);

//绘制上面大矩形内部的白色小矩形

for(var i=0;i<10;i ){

ctx.fillStyle=‘rgba(255,255,255,’ (i 1)/10 ‘)’;

for(var j=0;j<4;j ){

ctx.fillRect(15 i14,5 j37.5,14,27.5);

}

}

}

}

上面的例子,先竖向绘制了四个大小一致、颜色分别为黄、绿、蓝、红的背景矩形。然后根据变量i和j在四个矩形内部分别以一定步长来绘制背景色为白色透明度不一的白色小矩形。

线型

canvas可以通过一定属性来设置线的样式。

lineWidth = value

lineCap = type

lineJoin = type

miterLimit = value

1.lineWidth属性

lineWidth用于设置当前绘制的线的粗细。属性值必须为正数。默认值为1.0。

注意,这里的线宽是指给定路径的中心到两边的粗细。换句话说就是:在路径的两边各绘制线宽的一半。

来看一个例子:

lineWidth

function draw(){

var canvas=document.getElementById(‘test_lineWidth1’);

if(canvas.getContext){

var ctx=canvas.getContext(‘2d’);

ctx.lineWid

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8939.html
标签
评论
发布的文章

FastJson 2『使用心得』

2024-06-18 23:06:34

fastjson(版本<=1.2.24)复现

2024-06-18 23:06:21

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!