HTML5-canvas画布
2017-10-11 11:58
513 查看
(1)canvas
width、height和style里面的width、height一样吗?
如果直接设置canvas的width和height:画布和元素的宽度是你设置的值
如果设置的是style里面的width和height,它仅表示canvas元素占文档流的位置,这时候画布的宽度和高度都是默认值分别是600,300。
注意:设置canvas的宽度的直接设置canvas的width和height属性,如果需要放大canvas画布,设置的CSS width和height应该和canvas的width和height属性值,比例保持一致,说白了就是对比缩放。
(2)坐标系
坐标的圆点是在左上角
定义画布的大小是style的属性,而定义画布的像素是canvas特有的width,height属性
var canvas= document.getElementById("canvas");
canvas.width = 500;
canvas.height = 500;
var context = canvas.getContext("2d");
context.moveTo(100,200);//移动原点,起始位置
context.lineTo(50,300);//目标位置
context.lineWidth =
10;//画笔的粗细
context.strokeStyle = "red";//画笔的样式
context.stroke();//开始画画
canvas是内联元素
画园
context.arc(200,200,100,800,1/2*Math.PI,
true);
参数:(圆心X,圆心Y,半径,起始角度,目标角度,画的方向【可选】)默认的是顺时针(false)
(3)描边和填充
stroke(描边)fill(填充)
(4)常用方法
getContext("2d"):获取渲染的上下文,说白了 获取画笔,后面的参数固定写“2d”
var context=
canvas.getContext("2d");
moveTo(x,y):移动画笔的位置,后面带两个参数
context.moveTo(250,150);
lineTo(x,y):加一条线,参数是线的终点位置
context.lineTo(250,300);
和线条相关的属性
lineWidth = 1;线的宽度
strokeStyle 线条的颜色
stroke()绘制线条
clearRect()关闭路径 也就是回到起点
fillStyle:这是属性 设置属性填充的颜色一般填颜色就可以
ctx.fillStyle=
"yellow";
fill():完成填充操作
ctx.fill();
beginPath()方法开始一条路径,或重置当前路径
beginPath()
arc(x,y,r,start,end,direction)绘制一个弧。前面两个参数组成圆心的坐标,第三个参数r半径。第四个参数:start起始的弧度,第五个参数end结束的弧度,最后一个参数direction,绘制方向,true:逆时针方向,false:顺时针方向,该默认是false
context.rect(x,y,w,h)绘制矩形(x,y)是矩形左上角的坐标位置,w:矩形的宽度 , h:矩形的高度。
width、height和style里面的width、height一样吗?
如果直接设置canvas的width和height:画布和元素的宽度是你设置的值
如果设置的是style里面的width和height,它仅表示canvas元素占文档流的位置,这时候画布的宽度和高度都是默认值分别是600,300。
注意:设置canvas的宽度的直接设置canvas的width和height属性,如果需要放大canvas画布,设置的CSS width和height应该和canvas的width和height属性值,比例保持一致,说白了就是对比缩放。
(2)坐标系
坐标的圆点是在左上角
定义画布的大小是style的属性,而定义画布的像素是canvas特有的width,height属性
var canvas= document.getElementById("canvas");
canvas.width = 500;
canvas.height = 500;
var context = canvas.getContext("2d");
context.moveTo(100,200);//移动原点,起始位置
context.lineTo(50,300);//目标位置
context.lineWidth =
10;//画笔的粗细
context.strokeStyle = "red";//画笔的样式
context.stroke();//开始画画
canvas是内联元素
画园
context.arc(200,200,100,800,1/2*Math.PI,
true);
参数:(圆心X,圆心Y,半径,起始角度,目标角度,画的方向【可选】)默认的是顺时针(false)
(3)描边和填充
stroke(描边)fill(填充)
(4)常用方法
getContext("2d"):获取渲染的上下文,说白了 获取画笔,后面的参数固定写“2d”
var context=
canvas.getContext("2d");
moveTo(x,y):移动画笔的位置,后面带两个参数
context.moveTo(250,150);
lineTo(x,y):加一条线,参数是线的终点位置
context.lineTo(250,300);
和线条相关的属性
lineWidth = 1;线的宽度
strokeStyle 线条的颜色
stroke()绘制线条
clearRect()关闭路径 也就是回到起点
fillStyle:这是属性 设置属性填充的颜色一般填颜色就可以
ctx.fillStyle=
"yellow";
fill():完成填充操作
ctx.fill();
beginPath()方法开始一条路径,或重置当前路径
beginPath()
arc(x,y,r,start,end,direction)绘制一个弧。前面两个参数组成圆心的坐标,第三个参数r半径。第四个参数:start起始的弧度,第五个参数end结束的弧度,最后一个参数direction,绘制方向,true:逆时针方向,false:顺时针方向,该默认是false
context.rect(x,y,w,h)绘制矩形(x,y)是矩形左上角的坐标位置,w:矩形的宽度 , h:矩形的高度。
相关文章推荐
- 使用HTML5的Canvas画布来剪裁用户头像
- 玩转html5(二)----用canvas结合脚本在画布上画简单的图
- HTML5 画布上的 Three.js 环境灯光(HTML5 Canvas Three.js Ambient Lighting)
- HTML5之Canvas绘图——获取Canvas画布的图片
- HTML5 Canvas(画布)实战编程初级篇:基本介绍和基础画布元素
- 自学HTML5第四节(canvas画布详解)
- HTML5 canvas 画布画圆
- HTML5 2D游戏引擎研发系列 第六章 <Canvas技术篇-画布技术-混色特效和粒子>
- HTML5入门十---Canvas画布实现画图(一)
- HTML5 canvas画布(二)
- 基于javascript和canvas(画布)的开源HTML5应用开发框架 - iio Engine
- 10款面向HTML5 画布(Canvas)的JavaScript库
- HTML5画布Canvas坐标轴转换、图案填充、渐变与阴影
- 玩转html5(二)----用canvas结合脚本在画布上画简单的图(html5又一强大功能)
- 用html5的canvas画布绘制贝塞尔曲线
- HTML5 canvas画布写炫彩动态的倒计时效果
- HTML5 画布 Canvas
- HTML5 canvas 画布画圆
- HTML5入门1---Canvas画布
- HTML5入门十一---Canvas画布实现画图(二)