zoukankan html css js c++ java

canvas学习持续更新

参考：菜鸟教程，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>

绘制线条

<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>

绘制圆形

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()

绘制文本

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>

渐变色

<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>

图像

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="200" height="200" style="border:1px solid #c3c3c3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

<script>

var c=document.getElementById("myCanvas");
if(c.getContext){
    var ctx=c.getContext("2d");
    ctx.fillRect(25,25,100,100);
    ctx.clearRect(45,45,60,60);
    ctx.strokeRect(50,50,50,50);
}

</script>

三角形

<body>

<canvas id="myCanvas" width="200" height="200" 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(75,50);
    ctx.lineTo(100,75);
    ctx.lineTo(100,25);
    //当你调用fill()函数时，所有没有闭合的形状都会自动闭合，
    //所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。
    ctx.fill();
}

</script>

</body>

人脸

<body>

<canvas id="myCanvas" width="200" height="200" 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(75,75,50,0,Math.PI*2,true);
    ctx.moveTo(110,75);
    ctx.arc(75,75,35,0,Math.PI,false);//口
    ctx.moveTo(65,65);
    ctx.arc(60,65,5,0,Math.PI*2,true);//左眼
    ctx.moveTo(95,65);
    ctx.arc(90,65,5,0,Math.PI*2,true);  // 右眼
    ctx.stroke();
}

</script>

圆弧

绘制圆弧或者圆，我们使用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>

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

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="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");
    //二次贝尔赛曲线
    ctx.beginPath();
    ctx.moveTo(75,25);
    ctx.quadraticCurveTo(25,25,25,62.5);
    ctx.quadraticCurveTo(25,100,50,100);
    ctx.quadraticCurveTo(50,120,30,125);
    ctx.quadraticCurveTo(60,120,70,100);
    ctx.quadraticCurveTo(125,100,120,70);
    ctx.quadraticCurveTo(125,25,75,25);
    ctx.stroke();
    
}

</script>

日常所遇，随手而记。

查看全文

相关阅读:
398. Random Pick Index
382. Linked List Random Node
645. Set Mismatch
174. Dungeon Game
264. Ugly Number II
115. Distinct Subsequences
372. Super Pow
LeetCode 242 有效的字母异位词
 LeetCode 78 子集
 LeetCode 404 左叶子之和

原文地址：https://www.cnblogs.com/zhihou/p/7520170.html