HTML5 画布
2015-09-13 22:09
507 查看
HTML5 Canvas 画布
1.Canvas是一个块级标签。自带width: height: 属性 不用再CSS上写,不用写PX;
getContext:获取上下文,只有canvas才有的属性;可以称之为画笔;
2.var cs=document.getElementById("cs");获取画布
var context=cs.getContext("2d");获取画笔
3.绘制矩形
带填充内容的
context.fillRect(10,10,100,50)x,y,width,height;
有边框没有填充内容的矩形
context.strokeRect(10,10,100,50)
画笔颜色(红色)
填充画笔 context.fillStyle="red";
没有填充画笔 context.strokeStyle="red";
绘制阴影
阴影程度: context.shadowBlur=15;
阴影颜色: context.shadowColor="black";
绘制有渐变的图形
context.rect(10,10,100,50)有了路径,
重置所有的设置
context.restore();
绘制图片,要加路径
var img1=new Imag();
quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点,向当前路径添 加一个点。
开始点:moveTo(20,20)
控制点:quadraticCurveTo(20,100,200,20)
结束点:quadraticCurveTo(20,100,200,20)
1.Canvas是一个块级标签。自带width: height: 属性 不用再CSS上写,不用写PX;
getContext:获取上下文,只有canvas才有的属性;可以称之为画笔;
2.var cs=document.getElementById("cs");获取画布
var context=cs.getContext("2d");获取画笔
3.绘制矩形
带填充内容的
context.fillRect(10,10,100,50)x,y,width,height;
有边框没有填充内容的矩形
context.strokeRect(10,10,100,50)
画笔颜色(红色)
填充画笔 context.fillStyle="red";
没有填充画笔 context.strokeStyle="red";
绘制阴影
阴影程度: context.shadowBlur=15;
阴影颜色: context.shadowColor="black";
绘制有渐变的图形
context.rect(10,10,100,50)有了路径,
重置所有的设置
context.restore();
绘制图片,要加路径
var img1=new Imag();
quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点,向当前路径添 加一个点。
开始点:moveTo(20,20)
控制点:quadraticCurveTo(20,100,200,20)
结束点:quadraticCurveTo(20,100,200,20)
相关文章推荐
- HTML5 鼠标拖拽以及web存储
- html5_d登陆界面_注册界面
- HTML5
- 移除HTML5 input在type="number"时的上下小箭头
- HTML5
- html5+css3
- HTML5拖放API
- html5 本地存储
- html5 Forms
- HTML5和HTML4之间的区别
- html5 图片预览
- H5 限制input只能输入数字
- html5
- HTML5----Map标签
- HTML5 画一张图
- 老式浏览器兼容html5 css3
- html5 audio实现歌词同步
- 网游开发市场拓展完善,html5网游开发培训迫在眉睫?
- html5 ajax 跨域上传图片
- html5/css3响应式布局介绍及设计流程