canvas画布基础
2015-07-10 20:47
351 查看
canvas是个神奇的标签,开始学习之后就停不下来,这两天一直在慕课网上学习canvas的动画,老师讲的很好,很详细,现在我就简单的总结一下这两天学的内容。
首先对于HTML中的代码很简单:
然后在JavaScript中获取canvas
context非常重要,它用来承载我们所要实现的内容
首先对于HTML中的代码很简单:
<canvas id = "canvas" style = "border:1px solid #eee;display:block;margin:0 auto"></canvas>
然后在JavaScript中获取canvas
window.onload = function () {
var canvas = document.getElementById("canvas");
canvas.width = 1200;
canvas.height = 795;
context = canvas.getContext("2d");
}
context非常重要,它用来承载我们所要实现的内容
//直线
context.strokeStyle = "red";//直线的颜色
context.lineWidth = 3;//直线的宽度
context.beginPath();
context.moveTo(100,100);
context.lineTo(800,800);
context.closePath();
context.stroke();//绘制直线
//矩形
context.fillStyle = "blue";//矩形的填充颜色
context.strokeStyle = "black";//矩形的边框颜色
context.lineWidth = 3;//矩形边框的宽度
context.beginPath();
context.fillRect(100,100,200,100);//绘制一个起点在100,100位置宽200高100的矩形,矩形填充色为蓝色
context.strokeRect(100,100,200,100);//给矩形绘制宽度为3的黑色边框
//圆形
context.arc(x,y,r,o,f,true);//x:圆心的x坐标,y;圆心的y坐标,r:半径,o圆的起始位置,f:圆的终止位置,true or false:表示顺时针或者逆时针
//圆环
实现圆环是先画两个不一样大小的圆,要保证这两个圆的旋转方向是相反的,然后进行背景色的填充,这是根据非零环绕原则进行的区域填充
//直线渐变
var linearGrad = context.createLinearGradient(0,0,800,700);
linearGrad.addColorStop(0.0,"#fff");
linearGrad.addColorStop(1.0,"#000");
context.fillStyle = linearGrad;
context.fillRect(0,0,800,700);
//径向渐变
var radiaGrad = context2.createRadialGradient(400,400,100,400,400,500);
radiaGrad.addColorStop(0,"white");
radiaGrad.addColorStop(0.25,"yellow");
radiaGrad.addColorStop(0.5,"green");
radiaGrad.addColorStop(0.75,"blue");
radiaGrad.addColorStop(1,"black");
context2.fillStyle = radiaGrad;
context2.fillRect(0,0,800,800);
//图片填充
var img = new Image();
img.src = "1.jpg";
img.onload = function(){
var pattern = context.createPattern(img,"repeat");//repeat,repeat-x,repeat-y,no-repeat
context.fillStyle = pattern;
context.fillRect(0,0,800,600);
}
//线条的属性
lineCap="butt"//默认直线两端的样式
="round"
="square"
lineJoin = "miter"
"bevel"
"round"
//曲线的绘制
context.moveTo(x0,y0);
context.arcTo(x1,y1,x2,y2,r);//与x0y0到x1y1这条直线和x1y1到x2y2这条直线相切半径为r的曲线
//二次贝塞尔曲线
context.moveTo(x0,y0);
context.quadraticCurveTo(x1,y1,x2,y2);//x1,y1为曲线的控制点,x0y0为曲线的起始点,x2y2为曲线的终止点
//三次贝塞尔曲线
context.moveTo(x0,y0);
context.bezierCurveTo(x1,y1,x2,y2,x3,y3);//x1y1与x2y2为两个控制点
相关文章推荐
- HTML5 Canvas(画布)实战编程初级篇:基本介绍和基础画布元素
- 【读书笔记《Android游戏编程之从零开始》】12.游戏开发基础(Canvas 画布)
- html5 canvas 画布基础
- (17)HTML5-Canvas画布基础绘图
- 【读书笔记《Android游戏编程之从零开始》】12.游戏开发基础(Canvas 画布)
- 自定义控件零基础教学(四)—— canvas画布的所有方法
- Python3 Tkinter基础 Canvas Button 点击按钮删除画布中的所有图形
- canvas绘画基础(一):认识canvas画布
- Python3 Tkinter基础 Canvas background 创建一个白色的画布 create_line width 画一个宽的线
- canvas绘画基础(一):认识canvas画布
- Android 绘图基础:Canvas画布——自定义View基础(绘制表盘、矩形、圆形、弧、渐变)
- html5新增标签canvas画布基础详解及实操案例(上)
- Android游戏开发基础part2--Canvas画布
- Canvas对画布及文字控制基础API学习
- Android游戏开发基础part2--Canvas画布
- HTML5 Canvas(画布)实战编程初级篇:基本介绍和基础画布元素
- HTML5 Canvas(画布)实战编程初级篇:基本介绍和基础画布元素
- Android 绘图基础:Canvas画布——自定义View基础(绘制表盘、矩形、圆形、弧、渐变)
- Android中Canvas绘图基础详解(附源码下载)
- html5 canvas 奇怪的形状水平渐变(因为大多数的之前的文章把基础都打过了,所以开始写的快了,如果有不明白的,可以回顾下之前的)