Javascript HTML5 Canvas实现的一个画板

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

来源：阅读：892 次日期：2016-07-06 11:03:31

温馨提示：小编为您整理了“Javascript HTML5 Canvas实现的一个画板”,方便广大网友查阅！

这篇文章主要介绍了Javascript HTML5 Canvas实现的一个画板的相关资料,需要的朋友可以参考下

本文实例为大家分享了HTML5 Canvas实现的一个画板代码，供大家参考，具体内容如下:

<!DOCTYPE html>

<html>

<head>

<title>DEMO6：自定义画板</title>

</head>

<body>

浏览器不支持canvas

</canvas>

<br/>

<button style="width:80px;background-color:yellow;" onclick='linecolor="yellow";'>YELLOW</button>

<button style="width:80px ;background-color:green;" onclick='linecolor="green";'>GREEN</button>

<button style="width:80px ;background-color:white;" onclick='linecolor="white";'>WHITE</button>

<button style="width:80px ;background-color:black;" onclick='linecolor="black";'>BLACK</button>

<br/>

<br/>

<button style="width: 80px;background-color: white;" onclick="copyimage();">EXPORT</button>

<br/>

<br/>

var canvas = document.getElementById('canvas'); //获取标签

var ctx = canvas.getContext("2d");

var fillStyle = "black";

ctx.fillRect(0,0,600,300);

var onoff = false; //按下标记

var oldx = -10;

var oldy = -10;

//设置颜色

var linecolor = "white";

var linw = 4;

canvas.addEventListener("mousemove",draw,true); //鼠标移动事件

canvas.addEventListener("mousedown",down,false); //鼠标按下事件

canvas.addEventListener("mouseup",up,false); //鼠标弹起事件

function down(event){

onoff = true;

oldx = event.pageX - 10;

oldy = event.pageY - 10;

}

function up(){

onoff = false;

}

function draw(event){

if (onoff==true) {

var newx = event.pageX - 10;

var newy = event.pageY - 10

ctx.beginPath();

ctx.moveTo(oldx,oldy);

ctx.lineTo(newx,newy);

ctx.strokeStyle = linecolor;

ctx.lineWidth = linw;

ctx.lineCap = "round";

ctx.stroke();

oldx = newx;

oldy = newy;

}

function copyimage(event)

{

var img_png_src = canvas.toDataURL("image/png"); //将画板保存为图片格式的函数

document.getElementById("image_png").src = img_png_src;

}

</script>

</body>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助。

上一篇：基于javascript数组实现图片轮播

下一篇：bootstrap3 兼容IE8浏览器

手机网站地址：Javascript HTML5 Canvas实现的一个画板

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！