HTML5之简单小画板

一：先熟悉一下基本图形绘制

1：线条

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>绘制线条</title>
</head>
<body><canvas id="canvas" width="300" height="300" style="border: 1px solid red;"></canvas><script type="text/javascript">
//      1:获取对象var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");
//      2:开始点ctx.moveTo(10,10);
//      3:设置轮廓粗细和轮廓样式ctx.lineWidth=8;ctx.strokeStyle="orange";
//      4:结束点ctx.   lineTo(80,80);
//      5:填充轮廓ctx.stroke();</script>
</body>
</html>

2：矩形

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>绘制矩形</title>
</head>
<body><canvas id="canvas" width="300" height="300" style="border: 1px solid red;"></canvas><script type="text/javascript">
//      1:获取对象var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");
//      2:设置路径ctx.rect(10,10,100,100);
//      3:设置轮廓粗细和轮廓样式和设置内部填充样式ctx.lineWidth=10;ctx.strokeStyle="orange";ctx.fillStyle='cornsilk';
//      5:填充轮廓和填充图形ctx.stroke();ctx.fill();</script>
</body>
</html>

3：圆形

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>绘制圆形</title>
</head>
<body><canvas id="canvas" width="300" height="300" style="border: 1px solid red;"></canvas><script type="text/javascript">
//      1:获取对象var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");
//      2:设置路径ctx.arc(100,100,80,0*Math.PI/180,270*Math.PI/180);
//      3:设置轮廓粗细和轮廓样式和设置内部填充样式ctx.lineWidth=10;ctx.strokeStyle="orange";ctx.fillStyle='azure';
//      5:填充轮廓和填充图形ctx.stroke();ctx.fill();</script>
</body>
</html>

4：效果图

二：实现一个简单的小画板

1：代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>画布</title><style type="text/css">canvas{border: 2px solid orange;display: block;margin: 50px auto;}#thecolor{height: 50px;width: 50px;display: block;margin: 10px auto;}.mm{display: block;height: 40px;width: 40%;margin: 10px auto;     }</style></head><body style="margin: 0;"><input type="color" id="thecolor" value=""/><canvas id="can" width="600" height="400" ></canvas><div class="mm"><input type="text" name="size" id="size"  placeholder="输入画笔大小"/><button  id="but">OK</button><button id="xp">橡皮擦</button></div></body><script type="text/javascript">var can = document.getElementById("can");var ctx = can.getContext("2d");ctx.lineWidth=5;var flag=false;can.onmousedown=function(eva){var eva=eva||window.event;ctx.lineCap="round";ctx.lineJoin="round";var x=eva.offsetX;var y=eva.offsetY;ctx.beginPath();ctx.moveTo(x,y);flag=true;}can.onmousemove=function(eva){if(flag){ var eva=eva||window.event;var x=eva.offsetX;var y=eva.offsetY;ctx.lineTo(x,y);ctx.stroke();}}can.onmouseup=function(){flag=false;ctx.closePath();}can.onmouseleave=function(){flag=false;ctx.closePath();}var theColor=document.getElementById("thecolor");theColor.onchange=function(){ctx.strokeStyle=this.value;}var size=document.getElementById("size");var but=document.getElementById("but");but.onclick=function(){
//          alert(size.value)ctx.lineWidth=size.value;}var xp=document.getElementById("xp");xp.onclick=function(){ctx.strokeStyle='white';ctx.lineWidth=15;}</script>
</html>

2：效果图

HTML5之简单小画板相关推荐

html5画板功能,JS实现canvas简单小画板功能
本文实例为大家分享了JS实现canvas简单小画板的具体代码,供大家参考,具体内容如下 Html部分: Document CSS部分: *{ margin: 0; padding: 0; list-s ...
Html5 canvas 简单画布画板涂鸦例子
简单的Html5 canvas 画板涂鸦例子,巧妙的使用onmousemove 事件来实现画画, 可以实现指定颜色和宽度,如图: <!DOCTYPE HTML> <html>& ...
Java制作简单小画板
Java制作简单画板,包括两个类,一个主要画板类Drawpad,一个画板监听器DrawListener类. 1.Drawpad类,包括画板,画板功能设计,保存图片等 package Java课程设计; ...
电脑PHP动画制作画板,HTML_html5教程制作简单画板代码分享，HTML5制作简单画板复制代码代 - phpStudy...
html5教程制作简单画板代码分享 HTML5制作简单画板复制代码代码如下: http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min ...
微信小程序实现简单的画板
问题描述大部分安卓用户的手机里是没有自带画板功能的,而在近期网课盛行之时,一个随手可用的手写面板,无论是在写笔记方面,还是在辅助授课方面,一个小画板就体现出了很大的作用.那么这个功能应该如何来实现呢 ...
java之通信之初接触之小感，附上及其简单网络画板的代码
通信,指人与人或人与自然之间通过某种行为或媒介进行的信息交流与传递,从广义上指需要信息的双方或多方在不违背各自意愿的情况下无论采用何种方法,使用何种媒质,将信息从某方准确安全传送到另方.[百科释义] ...
HTML5实例教程——创意画板
在HTML5备受期待和瞩目的今天,越来越多的人已经感受到它带来的无限魅力与震撼力,许多的技术人员.设计者.互联网爱好者们纷纷加入了HTML5的研究与设计中. 首先我先为大家介绍一下一个功能很强大的HT ...
用python画画简单代码_Python3使用PyQt5制作简单的画板/手写板实例
1.前言版本:Python3.6.1 + PyQt5 写一个程序的时候需要用到画板/手写板,只需要最简单的那种.原以为网上到处都是,结果找了好几天,都没有找到想要的结果. 网上的要么是非python ...
python怎么建立画板_Python3使用PyQt5制作简单的画板/手写板实例
1.前言版本:Python3.6.1 + PyQt5 写一个程序的时候需要用到画板/手写板,只需要最简单的那种.原以为网上到处都是,结果找了好几天,都没有找到想要的结果. 网上的要么是非python ...

HTML5之简单小画板

一：先熟悉一下基本图形绘制

二：实现一个简单的小画板

HTML5之简单小画板相关推荐

最新文章

热门文章