HTML5 canvas游戏开发实战 2 : canvas基础

最新推荐文章于 2023-07-04 08:25:15 发布

CopperDong

最新推荐文章于 2023-07-04 08:25:15 发布

阅读量406

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/QFire/article/details/79272290

版权

前端专栏收录该内容

71 篇文章 1 订阅

订阅专栏

2.1 绘制基本图形

画线：

  <canvas id="myCanvas" width="200" height="100">
  </canvas>
  <script type="text/javascript">
  	var c=document.getElementById("myCanvas");
  	var ctx = c.getContext("2d");
  	ctx.lineWidth = 10;
  	ctx.strokeStyle = "red";
  	ctx.beginPath();
  	ctx.moveTo(10, 10);
  	ctx.lineTo(150, 50);
  	ctx.stroke();
  </script>   
</body>
</html>

画矩形：

  <script type="text/javascript">
  	var c=document.getElementById("myCanvas");
  	var ctx = c.getContext("2d");
  	ctx.lineWidth = 5;
  	ctx.strokeStyle = "red";
  	ctx.beginPath();
  	ctx.strokeRect(10, 10, 70, 40);
  </script>

画实心矩形：

  <script type="text/javascript">
  	var c=document.getElementById("myCanvas");
  	var ctx = c.getContext("2d");
  	ctx.filleStyle = "red";
  	ctx.beginPath();
  	ctx.fillRect(10, 10, 70, 40);
  </script>

画圆：

  <script type="text/javascript">
  	var c=document.getElementById("myCanvas");
  	var ctx = c.getContext("2d");
  	ctx.lineWidth = 5;
  	ctx.strokeStyle = "red";
  	ctx.beginPath();
  	ctx.arc(100, 100, 70, 0, 130*Math.PI/180, true);
  	ctx.stroke();
  </script>

可以用fill函数来画一个实心的圆弧

  <script type="text/javascript">
  	var c=document.getElementById("myCanvas");
  	var ctx = c.getContext("2d");
  	ctx.lineWidth = 5;
  	ctx.fillStyle = "red";
  	ctx.beginPath();
  	ctx.arc(100, 100, 70, 0, 130*Math.PI/180, true);
  	ctx.fill();
  </script>

画圆角矩形：没有直接画圆角矩形的API，但可以用arcTo函数画圆角，再结合直线绘制。

  <script type="text/javascript">
  	var c=document.getElementById("myCanvas");
  	var ctx = c.getContext("2d");
  	ctx.beginPath();
  	ctx.moveTo(20, 20);
  	ctx.lineTo(70, 20);
  	ctx.arcTo(120, 30, 120, 70, 50);   # P1 and P2 , radius为50
  	ctx.lineTo(120, 120);
  	ctx.stroke();
  </script>

擦除Canvas画板：clearRect函数

  <script type="text/javascript">
  	var c=document.getElementById("myCanvas");
  	var ctx = c.getContext("2d");
  	ctx.fillStyle = "red"
  	ctx.beginPath();
  	ctx.fillRect(10, 10, 200, 100);
  	ctx.clearRect(30, 30, 50, 50);
  </script>

2.2 绘制复杂图形

画曲线：贝赛尔曲线是应用于二维图形应用程序的数学曲线。
二次贝赛尔曲线有一个控制点，用quadraticCurveTo(cpx, cpy, x, y)，cpx、cpy表示控制点的坐标，x,y表示终点坐标。

  <script type="text/javascript">
  	var c=document.getElementById("myCanvas");
  	var ctx = c.getContext("2d");
  	ctx.beginPath();
  	ctx.moveTo(100, 100);
  	ctx.quadraticCurveTo(20, 50, 200, 20);
  	ctx.stroke();
  </script>

三次贝塞尔有两个控制点

  <script type="text/javascript">
  	var c=document.getElementById("myCanvas");
  	var ctx = c.getContext("2d");
  	ctx.moveTo(68, 130);
  	var cX1 = 20;
  	var cY1 = 10;
  	var cX2 = 268;
  	var cY2 = 10;
  	var endX = 268;
  	var endY = 170;
  	ctx.bezierCurveTo(cX1, cY1, cX2, cY2, endX, endY);
  	ctx.stroke();
  </script>

利用clip在指定区域绘图：

  <script type="text/javascript">
  	var c=document.getElementById("myCanvas");
  	var ctx = c.getContext("2d");
  	ctx.arc(100, 100, 40, 0, 360*Math.PI/180, true);
  	ctx.clip();
  	ctx.beginPath();
  	//绘制矩形，但显示不出来
  	ctx.fillStyle = "lightblue";
  	ctx.fillRect(0, 0, 300, 150);
  </script>

2.3 绘制文本

绘制文字：fillText和strokeText

  <script type="text/javascript">
  	var c=document.getElementById("myCanvas");
  	var ctx = c.getContext("2d");
  	ctx.font="30px Arial";
  	//ctx.fillText("Hello World", 100, 50);
  	ctx.strokeText("Hello World", 100, 50);
  </script>

文字设置：font这个参数，大小、字体

文字粗体效果：font-weight属性

文字斜体效果：font-style属性

文字的对齐方式：textAlign（水平方向）和textBaseline（竖直方向）

2.4 图片操作

利用drawImage绘制图片：

drawImage(image, dx, dy);

drawImage(image, dx, dy, dw, dh);

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

先用<img>标签得到图片数据

<body>
  <img id="face" src="face.jpg" alt="The Face" width="240" height="240" /><br />
  canvas<br />
  <canvas id="myCanvas" width="500" height="350">
  </canvas>
  <script type="text/javascript">
  	var c=document.getElementById("myCanvas");
  	var ctx = c.getContext("2d");
  	var img = document.getElementById("face");
  	console.log(img);
  	img.onload = function() {
  	ctx.drawImage(img, 10, 10);
  };
  </script>   
</body>

  <script type="text/javascript">
  	var c=document.getElementById("myCanvas");
  	var ctx = c.getContext("2d");
  	var image = new Image();
  	image.src = "face.jpg";
  	console.log(image);
  	image.onload = function() {
  	  ctx.drawImage(image, 10, 10);
  	  ctx.drawImage(image, 260, 10, 100, 100);
  	  ctx.drawImage(image, 50, 50, 100, 100, 26, 130, 100, 100);
    };
  </script>

利用getImageData和putImageData绘制图片：

  <script type="text/javascript">
  	var c=document.getElementById("myCanvas");
  	var ctx = c.getContext("2d");
  	var image = new Image();
  	image.src = "face.jpg";
  	console.log(image);
  	image.onload = function() {
  	  ctx.drawImage(image, 10, 10);
  	  var imgData = ctx.getImageData(50, 50, 200, 200);
  	  ctx.putImageData(imgData, 10, 260);
  	  ctx.putImageData(imgData, 200, 260, 50, 50, 100, 100);
    };
  </script>

利用createImageData新建像素：

返回指定大小的imageData对象：createImageData(sw, sh);

返回与指定对象相同大小的imageData对象：createImageData(imagedata);

  <script type="text/javascript">
  	var c=document.getElementById("myCanvas");
  	var ctx = c.getContext("2d");
  	var image = new Image();
  	image.src = "face.jpg";
  	console.log(image);
  	image.onload = function() {
  	  ctx.drawImage(image, 10, 10);
  	  var imgData = ctx.getImageData(50, 50, 200, 200);
   
  	  var imgData01 = ctx.createImageData(imgData);
  	  for (i=0; i<imgData01.width*imgData01.height*4; i+=4) {
  	  	imgData01.data[i+0] = 255;
  	  	imgData01.data[i+1] = 0;
  	  	imgData01.data[i+2] = 0;
  	  	imgData01.data[i+3] = 255;
  	  }
  	  ctx.putImageData(imgData01, 10, 260);

  	  var imgData02 = ctx.createImageData(100, 100);
  	  for (i=0; i<imgData02.width*imgData02.height*4; i+=4) {
  	  	imgData02.data[i+0] = 255;
  	  	imgData02.data[i+1] = 0;
  	  	imgData02.data[i+2] = 0;
  	  	imgData02.data[i+3] = 255;
  	  }
  	  ctx.putImageData(imgData02, 220, 260);
  	  
    };
  </script>

CopperDong

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5 canvas游戏开发实战 2 : canvas基础

2.1 绘制基本图形画线： var c=document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.lineWidth = 10; ctx.strokeStyle = "red"; ctx.beginPath(); ctx.moveTo(10, 10
复制链接

扫一扫

专栏目录