canvas学习持续更新

时间：2021-07-07 03:14:20

参考：菜鸟教程，canvas教程

绘制一个简单的矩形

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">

您的浏览器不支持 HTML5 canvas 标签。

</canvas>

<script>

//1.找到元素

var c=document.getElementById("myCanvas");

//2.创建context对象

var ctx=c.getContext("2d");

//3.绘制一个矩形

ctx.fillStyle="#f0f0f0";
//(上面这个必须在下面的前面，否则无效)

ctx.fillRect(0,0,150,75);
（这4个坐标是，矩形左上角x,y坐标，矩形右下角x,y坐标）

</script>

</body>

canvas学习持续更新

绘制线条

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>

var c=document.getElementById("myCanvas");

//2.创建context对象

var ctx=c.getContext("2d");

ctx.moveTo(0,0);

ctx.lineTo(200,100);

//stroke()方法实际地绘制通过moveTo()和lineTo()方法的路径

ctx.stroke();

</script>

</body>

canvas学习持续更新

绘制圆形

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.beginPath();

//arc(x,y,r,start,stop)

ctx.arc(95,50,40,0,2*Math.PI);

ctx.stroke()

canvas学习持续更新
 

canvas学习持续更新

绘制文本

font()------------定义字体
fillText(text,x,y) 在canvas上绘制实心的文本
stroke Text(text,x,y)  在canvas上绘制空心的文本

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

您的浏览器不支持 HTML5 canvas 标签。</canvas>

<canvas id="myCanvas2" width="200" height="100" style="border:1px solid #d3d3d3;">

您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="red";

ctx.font="30px Arial";

ctx.fillText("Hello world",20,50)

var c=document.getElementById("myCanvas2");

var ctx=c.getContext("2d");

ctx.fillStyle="red";

ctx.font="30px Arial";

ctx.strokeText("Hello world",10,50)

</script>

</body>

canvas学习持续更新

渐变色

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

您的浏览器不支持 HTML5 canvas 标签。</canvas>

<canvas id="myCanvas2" width="200" height="100" style="border:1px solid #d3d3d3;">

您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>

//线性渐变

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

// Create gradient

//填充的范围

var grd=ctx.createLinearGradient(0,0,200,0);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// 填充的颜色

ctx.fillStyle=grd;

//矩形的坐标

ctx.fillRect(10,10,150,80);

//径向渐变

var c=document.getElementById("myCanvas2");

var ctx=c.getContext("2d");

//使用 createRadialGradient():

//context.createRadialGradient(x0,y0,r0,x1,y1,r1);

var grd=ctx.createRadialGradient(75,50,5,90,60,100);

grd.addColorStop(0,"red");

grd.addColorStop(1,"white");

// 填充渐变

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

</script>

</body>

canvas学习持续更新

图像

drawImage(image,x,y)

canvas教程

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial

首先，我们回到矩形的绘制中。canvas提供了三种方法绘制矩形：

fillRect(x, y, width, height)
绘制一个填充的矩形
strokeRect(x, y, width, height)
绘制一个矩形的边框
clearRect(x, y, width, height)
清除指定矩形区域，让清除部分完全透明。

<body>

<canvas id="myCanvas" width="" height="" style="border:1px solid #c3c3c3;">

您的浏览器不支持 HTML5 canvas 标签。

</canvas>

<script>

var c=document.getElementById("myCanvas");

if(c.getContext){

    var ctx=c.getContext("2d");

    ctx.fillRect(,,,);

    ctx.clearRect(,,,);

    ctx.strokeRect(,,,);

}

</script>

canvas学习持续更新

三角形

<body>

<canvas id="myCanvas" width="" height="" style="border:1px solid #c3c3c3;">

您的浏览器不支持 HTML5 canvas 标签。

</canvas>

<script>

var c=document.getElementById("myCanvas");

if(c.getContext){

    var ctx=c.getContext("2d");

    ctx.beginPath();

    ctx.moveTo(,);

    ctx.lineTo(,);

    ctx.lineTo(,);

    //当你调用fill()函数时，所有没有闭合的形状都会自动闭合，

    //所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。

    ctx.fill();

}

</script>

</body>

canvas学习持续更新

人脸

<body>

<canvas id="myCanvas" width="" height="" style="border:1px solid #c3c3c3;">

您的浏览器不支持 HTML5 canvas 标签。

</canvas>

<script>

var c=document.getElementById("myCanvas");

if(c.getContext){

    var ctx=c.getContext("2d");

    ctx.beginPath();

    ctx.arc(,,,,Math.PI*,true);

    ctx.moveTo(,);

    ctx.arc(,,,,Math.PI,false);//口

    ctx.moveTo(,);

    ctx.arc(,,,,Math.PI*,true);//左眼

    ctx.moveTo(,);

    ctx.arc(,,,,Math.PI*,true);  // 右眼

    ctx.stroke();

}

</script>

canvas学习持续更新

圆弧

绘制圆弧或者圆，我们使用arc()方法。当然可以使用arcTo()

arc(x, y, radius, startAngle, endAngle, anticlockwise)
画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。

该方法有六个参数：x,y为绘制圆弧所在圆上的圆心坐标。radius为半径。startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise 为一个布尔值。为true时，是逆时针方向，否则顺时针方向。

<body>

<canvas id="myCanvas" width="200" height="300" style="border:1px solid #c3c3c3;">

您的浏览器不支持 HTML5 canvas 标签。

</canvas>

<script>

var c=document.getElementById("myCanvas");

if(c.getContext){

	var ctx=c.getContext("2d");

	for(var i=0;i<4;i++){

		for(var j=0;j<3;j++){

			ctx.beginPath();

			var x=25+j*50;

			var y=25+i*50;

			var radius=20;

			var startAngle=0;

			var endAngle=Math.PI+(Math.PI*j)/2;

			var anticlockwise  = i%2==0 ? false : true;

			ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

			if(i>1){

				ctx.fill()

			}else{

				ctx.stroke()

			}

		}

	}

}

</script>

</body>

canvas学习持续更新

二次贝塞尔曲线及三次贝塞尔曲线

quadraticCurveTo(cp1x, cp1y, x, y)绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。

<body>

<canvas id="myCanvas" width="" height="" style="border:1px solid #c3c3c3;">

您的浏览器不支持 HTML5 canvas 标签。

</canvas>

<script>

var c=document.getElementById("myCanvas");

if(c.getContext){

    var ctx=c.getContext("2d");

    //二次贝尔赛曲线

    ctx.beginPath();

    ctx.moveTo(,);

    ctx.quadraticCurveTo(,,,62.5);

    ctx.quadraticCurveTo(,,,);

    ctx.quadraticCurveTo(,,,);

    ctx.quadraticCurveTo(,,,);

    ctx.quadraticCurveTo(,,,);

    ctx.quadraticCurveTo(,,,);

    ctx.stroke();

}

</script>

canvas学习持续更新

　　

相关文章