2018-04-27 canvas入门
2018-04-28 本文已影响0人
彭奕泽
1. MDN
canvas只有两个属性，width和height
<html>
<head>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d"); // 最重要一步
//画实心矩形，x,y,width,height
ctx.fillRect (10, 10, 55, 50);
//实心的颜色
ctx.fillStyle = "rgb(200,0,0)";
//画空心的矩形
ctx.strokeRect(50,50,50,50);
}
}
</script>
</head>
<body onload="draw();"> //body里要加上这个
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
2. 奕泽画板
- canvas相关API
//获取canvas标签
var canvas = document.querySelector("#canvas");
//获得渲染上下文，画画的操作就全部在context上了
let context = canvas.getContext('2d')
// 设置画板大小为屏幕大小
canvas.width = document.documentElement.clientWidth
canvas.height = document.documentElement.clientHeight
//画线
canvas.onmousemove = function(ev) {
var x = ev.clientX;
var y = ev.clientY;
// ......记下来前一个点和后一个点
function drawLine(x1,y1,x2,y2) {
context.beginPath();
context.moveTo(x1-0,y1+29); //起点
context.lineTo(x2-0,y2+29); //终点
context.lineWidth = 5; //线的粗细
context.stroke(); //将各个点练成线
}
}
//画三角形
function drawLine(x1,y1,x2,y2) {
context.beginPath();
context.moveTo(x1,y1); //起点
context.lineTo(x2,y2); //第二个点
context.lineTo(x3,y3); //第三个点
context.closePath(); //将第一个点和最后一个点连起来
context.stroke(); //将各个点练成线
}
//画圆圈
function drawTriangle(x,y,r) {
context.beginPath();
context.arc(x-0,y+29,r,0,Math.PI*2); //left，top，半径， 起点（以原点为圆心从第一象限的x轴开始往y轴负方向画圈），终点
context.fill(); //将圆圈填色
}
context.strokeStyle = 'black'; //线的颜色
context.fillStyle = 'black'; //圆圈填充的颜色
context.clearRect(x,y,30,30); //橡皮擦功能，被清除部分变透明
- DOM元素
//触屏设备
canvas.ontouchstart = function(ev){
var x = ev.touches[0].clientX; //获取点击的位置
var y = ev.touches[0].clientY;
}
canvas.ontouchmove = function(){}
//非触屏设备
canvas.onmousedown = function(ev){}
canvas.onmousemove = function (ev) {}
canvas.onmouseup = function () {}
canvas.onmouseout = function () {}
