HTML 5 Canvas常用属性和方法

填充

fillStyle = "#ff0000"    //设置填充颜色为纯红
fillStyle = my_gradient  //设置填充渐变样式
fillRect(20,20,200,200)  //开始画

笔触(边框)

strokeStyle = "#ff0000"  //设置笔触颜色为纯红
strokeStyle = my_gradient;  //设置笔触渐变样式
strokeRect(20,20,200,20); //开始画矩形

阴影

shadowColor = "#ff0000"; //设置阴影颜色
shadowBlur = 20; //设置阴影模糊级别,默认为0
shadowOffsetX;  //设置阴影水平偏移
shadowOffsetY;  //设置阴影垂直偏移

渐变

createLinearGradient(20,20,20,200); //创建点(20,20)到点(200,20)的渐变
addColorStop(0.3,"#ff0000");addColorStop(0.8,"#ffffff");    规定渐变对象中的颜色和停止位置
createRadialGradient(); //创建径向渐变
createPattern(img,'repeat-x');  //在x轴上平铺img

线条样式

ctx.lineCap="round"; //圆角末端
ctx.lineJoin="round";   //圆角交替点
ctx.lineWidth=10; //线条的粗度为10像素

矩形

rect(); //创建矩形
stroke();   //开始画
strokeRect(20,20,200,20);   //一键画
arc();  //创建圆形
stroke();   //开始画
fillRect()  //绘制填充的矩形
clearRect() //在给定的矩形内清除指定的像素

路径

fill()  //填充,默认黑色,可以通过fillStyle设置颜色
stroke() //绘制已定义的路径,默认黑色,可以通过strokeStyle设置颜色
beginPath() //起始一条路径,或重置当前路径
moveTo()    //把路径移动到画布中的指定点,不创建线条
closePath() //创建从当前点回到起始点的路径
lineTo()    //添加一个新点,然后在画布中创建从该点到最后指定点的线条

转换

scale(2,0.5)  //长度变成原来的两倍,宽度变为原来的一半
rotate(30*Math.PI/180)  //围绕(0,0)顺时针旋转30度
ctx.translate(70,70);   //设置选择点为(70,70);

文本

ctx.font="40px Arial";  //设置填充的字体是Arial,字体大小40px
ctx.fillText("Hello World",10,50);  //在(10,50)处绘制"hello world"
ctx.textBaseline="top"; ctx.fillText("Top",5,100); //基线位于文本以上
ctx.textAlign="start";ctx.fillText("textAlign=start",150,60);   //基线位于文本开始之前
ctx.fillStyle=gradient;ctx.fillText("hello",10,90); //在(10,90)处画hello,并使用gradient渐变填充
ctx.strokeStyle=gradient;ctx.strokeText("jack",10,90);  //在(10,90)处画jack的轮廓,并使用gradient渐变

图像绘制

ctx.drawImage(img,10,10); //在(10,10)这个点绘制图像,图像的尺寸有资源决定
ctx.drawImage(ImgObj,0,0,50,50);  //在(0,0)处绘制图像,尺寸为50*50
ctx.drawImage(ImgObj,0,0,858,536,0,0,400,400);  把ImgObj从图片的(0,0)位置开始裁剪,裁剪858x536,然后放在canvas的(0,0)位置,以400x400显示

几点注意

1.加载图片要绑定图片的onload事件

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值