HTML 5 Canvas常用属性和方法
2017-03-06 22:13
423 查看
填充
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事件相关文章推荐
- HTML常用的获取页面属性方法总结(HTTP/HTTPS/request)
- HTML、js:如何利用Location对象的常用属性和方法重新加载、刷新页面
- html文本框控件的常用属性、事件和方法
- HTML中常用的元素属性或方法
- HTML DOM (三)DOM的常用属性和方法
- JS操作HTML节点常用到的方法和节点属性
- HTML/CSS 常用方法释义,标签属性以及对应单词表
- 常用元素的属性/方法 attr / val / html /text
- js基础之DOM中document对象的常用属性方法
- [html5入门-12]html布局中form表单的简单用法和常用属性设置
- 动态创建html内容时所用的W3C DOM属性和方法
- UITableView的常用方法和属性
- WPF RichTextBox读取存储文本的方法和常用属性
- HTML页面meta标签常用的属性/属性值
- 常用HTML meta 标签属性(网站兼容与优化需要),meta标签
- UIDatePicker应用 常用属性和方法
- UIWebView浏览器控件常用属性与方法汇总
- 常用的HTML标签和属性解释
- Express框架req,res常用属性与方法
- Android中Canvas的常用方法