初识之-html5 Canvas

最新推荐文章于 2024-09-18 09:28:47 发布

nicole88_

最新推荐文章于 2024-09-18 09:28:47 发布

阅读量273

点赞数

分类专栏： html5 文章标签： html5 canvas

本文链接：https://blog.csdn.net/u011587301/article/details/50969333

版权

html5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这几天暂时没事，初学习一下html5.首先学习的就是canvas.

基础知识：

1>.创建 <canvas id="demo1" width="" height="" ></canvas>

2>.通过画布的上下文进行画图 var context=document.getElementById("demo1").getContext("2d");

3> 绘图 context.fillStyle("#ccc"); //设置画布的背景色：CSS颜色图案渐变色默认颜色为黑色；必须先于图形绘制，否则背景色不起作用(十六进制颜色值: "#**")

context.strokeStyle("rgb(250,100,106)"); //设置边框样式

context.fillRect(0,0,100,100);

context.strokeRect(0,0,100,100);

context.clearRect(x,y,width,height); //清空图形中指定区域的像素

1.创建渐变图形

渐变方式分为：线性渐变，径向渐变

线性渐变：

1>创建 linearGradeient对象 context.createLinearGradient(xStart,yStrat,xEnd,yEnd);// 1如果yStart,与yEnd相同则按照水平方向渐变，如果xStart与xEnd相同，则按照沿 y轴进行渐变；如果都不相同，则按照对角线渐变。

2>设置渐变的颜色以及偏移量设置 context.addColorStrop(value,color); //value 渐变位置偏移量，其值在0-1之间；通常为了实现颜色渐变，需要设置两次，第一次渐变开始的颜色，第二次，结束渐变的颜色

3> 将创建的 linearGradeient赋值给fillStyle,

2.在画布中使用路径

调用绘画的两个方法：moveTo,LineTo() 可以直接绘制直线，调用arc()方法可以绘制指定位置与大小的原型

1>context.moveTo(x,y) //将画笔移至指定点并以该点为直线的开始点

2>context.lineTo(x,y) //绘制直线，将画笔从指定的坐标与传递的终点坐标直接绘制一条直线，该方法可以重复使用

3>context.stoke() //在画布中描绘直线路径，最终在画布中展示最终结果

4> context.beginPath(); // 在调用arc绘制之前，必须调用，声明开始绘制路径；此方法仅对应单次绘制

5>context.arc(x,y,radiue,startAngle,endAngle,anticlokwise); //x :表示绘制圆形的横坐标；y：表示绘制圆形的纵坐标；radiue:表示绘制圆形的半径，单位为像素；startAngle：表示绘制圆形的开始弧度；endAngle：表示绘制圆形的结束弧度(Math.PI*2 360度)；anticlokwise：为布尔值，表示是否按照顺时针绘制， true,顺时针；false，逆时针

6>context.closePath(); //在绘制图形结束后调用，将绘制图形的路径进行封闭

7> 对绘制的图形进行填充，描述

context.strokeStyle="red";

context.lineWidth=2;

context.stroke(); //进行描边操作

context.fillStyle="blue";

context.fill(); //进行填充

8>绘制渐变圆形 context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd); //xStart:开始渐变圆心的横坐标；yStartyStart:开始渐变圆心的纵坐标；radiusStart：开始渐变的圆形半径；xEnd：结束渐变的横坐标；yEnd：结束渐变的纵坐标；radiusEnd：结束渐变的圆形半径; 通过 addColorStop(value,color)

进行添加偏移量与渐变色

绘制贝塞尔曲线（贝济埃、bezier） context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)

绘制二次样条曲线 context.quadraticCurveTo(qcpx,qcpy,qx,qy)

<span style="font-size:18px;">//绘制直线 一个直角三角行 坐标(10,10) (10,100) (100,10)
function pathDraw(){
	 var context=document.getElementById("view").getContext("2d");
	 //没有设置strokeStyle时，直线为黑线
     context.strokeStyle="red";
	 context.moveTo(10,10);
	 context.lineTo(50,10); //此处为标示lineTo 可以多次调用
	 context.lineTo(100,10);
	 context.stroke();
	 context.moveTo(10,10);
	 context.lineTo(10,100);
	 context.stroke();
	 context.moveTo(100,10);
	 context.lineTo(10,100);
     context.stroke();
}</span>

//绘制一个带有边框的圆
function circleDraw(){
var context=document.getElementById("view").getContext("2d");
context.fillStyle="yellow"; //进行填充颜色设置
context.strokeStyle="red"; //进行边框颜色设置
context.beginPath();
context.arc(100,100,50,0,Math.PI*2,true);
context.closePath();
context.stroke(); //设置边框
context.fill();//设置填充
}

//绘制一个渐变的圆形
function circleColorDraw(){
var context=document.getElementById("view").getContext("2d");
//设置渐变圆
var gent=context.createRadialGradient(30,30,0,20,20,400);
//颜色
gent.addColorStop(0,"#000");
gent.addColorStop(0.3,"#eee");
gent.addColorStop(1,"#fff");
context.beginPath();
context.arc(125,95,80,0,Math.PI*2,true);
context.closePath();
context.fillStyle=gent;
context.fill();
//设置边框
context.beginPath();
context.arc(125,95,80,0,Math.PI*2,true);
context.closePath();
context.strokeStyle="red";
context.stroke();
}