HTML5 -- canvas实现简易画板

效果预览：

代码部分：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><canvas id="canvas" width="600" height="600"></canvas><script type="text/javascript">var c = document.getElementById('canvas');var ctx = c.getContext('2d');//画一个黑色矩形ctx.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.lineCap = 'round';ctx.stroke();oldx = newx;oldy = newy;}}</script></body>
</html>

HTML5 -- canvas实现简易画板相关推荐

html5 canvas手写画板下载图片至本地
html5 canvas手写画板下载图片至本地 <!DOCTYPE html> <html><head><meta charset="utf-8& ...
Html5 canvas 简单画布画板涂鸦例子
简单的Html5 canvas 画板涂鸦例子,巧妙的使用onmousemove 事件来实现画画, 可以实现指定颜色和宽度,如图: <!DOCTYPE HTML> <html>& ...
vue2 + canvas 实现简易画板
前言这两天在做QQ聊天机器人,目前也实现了一些功能准备往里面加一些小游戏的功能,思来想去就准备自己实现一个简易版的你画我猜,但是QQ肯定不支持我发个画板过来,于是便诞生了这个网站picture_b ...
使用html canvas制作简易画板
程序演示效果关键代码刨析 1.关于canvas导入图片导入图片时出现了,canvas加载图片需要二次刷新的问题解决如下 var imgurl = $(this).find('img').attr( ...
html音乐播放器频谱,HTML5 Canvas 实现简易绘制音乐环形频谱图
0.启发在B站我们有很多的小伙伴们应该都看到过用AE做的可视化音乐播放器播放音乐的视频,看着特别酷炫带感有木有. B站截图 B站截图 B站截图所以今天我就用 Canvas 做个简单环形频谱图. ...
基于 HTML5 Canvas 的简易 2D 3D 编辑器
不管在任何领域,只要能让非程序员能通过拖拽来实现 2D 和 3D 的设计图就是很牛的,今天我们不需要 3dMaxs 等设计软件,直接用 HT 就能自己写出一个 2D 3D 编辑器,实现这个功能我觉得成 ...
超酷的HTML5 Canvas网络画板教程
在今天的HTML教程里,我们要学习一下如何使用HTML5 Canvas实现一个超酷而又简单的网络画板功能.在这个教程中,我们可以选择笔刷的类型.笔刷的大小以及笔刷的颜色,当然作为画板还需要很多功能,这 ...
50代码HTML5 Canvas 3D 编辑器优雅搞定
1024程序员节刚过,手痒想实现一个html的3d编辑器,看了three.js 同时还看了网上流传已久的<<基于 HTML5 Canvas 的简易 2D 3D 编辑器>>,都觉 ...
html5 电子白板直播,HTML5 canvas 做画板画图可以做电子白板
HTML5 canvas 做画板画图可以做电子白板 HTML5 canvas 做画板画图可以做电子白板 var canvas; var context; var tool; /** * calle ...

HTML5 -- canvas实现简易画板

HTML5 -- canvas实现简易画板相关推荐

最新文章

热门文章