实现简单的Canvas画图

最新推荐文章于 2021-03-31 18:40:02 发布

简生

最新推荐文章于 2021-03-31 18:40:02 发布

阅读量721

点赞数

分类专栏： JavaScript HTML5 文章标签： function

本文链接：https://blog.csdn.net/jiancm2001/article/details/7010511

版权

JavaScript 同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

HTML5

7 篇文章 0 订阅

订阅专栏

定义变量:

var startX;
var startY;
var endX;
var endY;
var radius;
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var select = document.getElementsByTagName("select");

函数部分:

window.οnlοad=function() {
    canvas.onmousedown = function(e) {
	e = e || event;
	startX = e.clientX;
	startY = e.clientY;
	if(select[0].value == "arc") {
	    canvas.onmousemove = moveShowArc;
	} else {
	    canvas.onmousemove = moveShowRect;
	}
    }
    canvas.onmouseup = function() {
	canvas.onmousemove = "";
    }
}
function moveShowRect(e) {
    context.clearRect(0, 0, 500, 300);
    endX = e.clientX - startX;
    endY = e.clientY - startY;
    context.beginPath();
    context.rect(startX, startY, endX, endY);
    context.fillStyle = "#8ED6FF";
    context.fill();
    context.lineWidth = 3;
    context.strokeStyle = "black";
    context.stroke();
}
function moveShowArc(e) {
    context.clearRect(0, 0, 500, 300);
    endX = e.clientX - startX;
    endY = e.clientY - startY;
    radius = Math.sqrt(Math.pow(endX,2)+Math.pow(endY,2));
    context.beginPath();
    context.arc(startX, startY,radius,0,2 * Math.PI,false);
    context.fillStyle = "#8ED6FF";
    context.fill();
    context.lineWidth = 3;
    context.strokeStyle = "black";
    context.stroke();
}

Demo