HTML5的Canvas标签入门

时间 2019-11-30

原文原文链接

1、初步使用 `<canvas>`标签

咱们先用之前的知识画一个简略的，用的是div标签，简略版一个简单的小demo， canvas 默认的大小是300*150css

HTML代码以下html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <canvas id="canvas" width="300px" height="300px">
    
  </canvas>
</body>
</html>
复制代码

JavaScript代码以下：canvas

var isPainting = false;
var canvas =document.getElementById("canvas");
canvas.onmousedown = function(msg){
  isPainting = true;
  var x = msg.clientX;
//   console.log(x);
  var y = msg.clientY;
//   console.log(y);
  var context = canvas.getContext('2d');
  context.beginPath();
  context.arc(x, y, 1, 0, 360);
  context.fill();
};
canvas.onmousemove = function(msg){
  if(isPainting){
    var x = msg.clientX;
  var y = msg.clientY;
  var context = canvas.getContext('2d');
  context.beginPath();
  context.arc(x, y, 1, 0, 360);
  context.fill();
  } else{
  
  }
}
canvas.onmouseup = function(msg){
  isPainting = false;
  
}
复制代码

主要的是如下几句：bash

var context = canvas.getContext('2d'); //canvas的上下文环境
  context.beginPath(); //开始画图
  context.arc(x, y, 1, 0, 360); //画一个圆，圆心坐标是(x, y) 半径1px,从0度到 360度。若是是其余数是3.141592678
  context.fill(); //填充
复制代码

绘制Rectangle 矩形spa

context.stroke() //只画边界
  context.fillStyle = 'red'; //用红色填充 //这句话要在前面，由于要先画上去
  fillRect(x,y,width,height) //画一个矩形
  strokeRect(x,y,width,height) //画一个矩形边框
  clearRect(x,y,width,height) //清楚规定大小的矩形
复制代码

总结：除了矩形，其余的都用context.beginPath()开始画图 getContext的用法让我想起了Java里的request.getContextPath()来得到绝对路径名字，EL表达式就是${pageContext.request.contextPath()}，如此怀念那段日子。

注意一个小Bug

body默认的margin是8px,会影响你作圆时的位置，避免这个bug就把这个margin设置为0 code

[图片上传中...(此时的坐标.png-d559cd-1513917965074-0)]

你想定位的坐标是（9,8）,这个坐标是相对于视口的，也就是说是相对于HTML那个的，若是你在canvas里面做图必然影响

去除以后

2、画布的demo

要想作出全屏的canvas，必定不能用width='100wh' height='100vh'，由于这个会等比缩放cdn

1. html5标签canvas
2. html5:canvas入门！
3. HTML5 canvas标签详解
4. HTML5- Canvas入门（一）
5. HTML5- Canvas入门（六）
6. HTML5- Canvas入门（三）
7. HTML5- Canvas入门（七）
8. HTML5- Canvas入门（五）
9. HTML5的新标签之一的Canvas
10. HTML5的Canvas和SVG标签理解
更多相关文章...
• Memcached入门教程 - NoSQL教程
• MyBatis if标签 - MyBatis教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用

HTML5的Canvas标签入门

1、初步使用 <canvas>标签

注意一个小Bug

2、画布的demo

1、初步使用 `<canvas>`标签