简易白板效果
代码语言：html
所属分类：其他
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>画板</title>
<meta name="viewport" content="initial-scale=1,width=device-width,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
<script type="text/javascript">
function IsPC() {
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}
function iftel() {
if (IsPC()) {} else {
var a = document.createElement('a');
a.href = "tels.html";
a.click();
}
}
iftel();
</script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
<script type="text/javascript">
var panel = null; //色彩及更多工具调整面板整体
var myevent = null;
var tiaos = null;
var rgbs = null;
var colortest = null;
var colorrgba = new Array(0, 0, 0, 1); //颜色值
var colorc16 = null;
var sizebut = null; //size 块
var basize = 10; //笔触大小
//canvas 组件
var canvas_t = null; //预览层
var canvas_v = null; //实际绘画层
var t_v = null;
var v_v = null; //上下文对象
var types = 1; // 绘画类型
var xiangp = false;
//colortest 颜色值刷新
function colorrgb() {
colortest.style.backgroundColor = "rgba("+colorrgba[0]+","+colorrgba[1]+","+colorrgba[2]+","+colorrgba[3]+")";
}
window.onload = function () {
panel = document.getElementById("box");
tiaos = document.getElementsByClassName("tiao");
rgbs = document.getElementsByClassName("rgbbut");
colortest = document.getElementById("colortest");
colorc16 = document.getElementsByClassName("colorc16");
sizebut = document.getElementById("sizebuts");
canvas_t = document.getElementById("cantest");
canvas_v = document.getElementById("canvalue");
canvas_t.width = $(window).width();
canvas_t.height = $(window).height();
canvas_v.width = $(window).width();
canvas_v.height = $(window).height();
t_v = canvas_t.getContext("2d");
v_v = canvas_v.getContext("2d");
t_v.lineJoin = "round";
v_v.lineJoin = "round";
v_v.lineCap = "round";
}
window.onmouseup = function() {
v_v.stroke();
v_v.beginPath();
v_v.closePath();
v_v.fill();
canvas_t.onmousemove = function() {
t_test();
}
window.onmousemove = function() {}
}
function xiu() {
var ls = sizebut.style.marginLeft.substring(0, sizebut.style.marginLeft.length-2);
var s = document.getElementById("bei").value;
basize = (ls*1+5)*s;
}
//处理笔触大小调整
function sizeto() {
var sx = document.getElementById("rgbjie").offsetLeft;
var tx = sx+panel.offsetLeft+10;
var s = document.getElementById("bei").value;
window.onmousemove = function() {
sizego(s, tx);
}
}
function sizego(as, sx) {
event = arguments.callee.caller.arguments[0] || window.event || event;
var x = event.clientX || event.pageX;
var ox = x-sx;
if (1 <= ox && ox <= 108) {
sizebut.style.marginLeft = (ox-5)+"px";
tiaos[4].style.width = ox+"px";
basize = ox*as;
}
}
//处理rgb调色板中按钮的位移
function rgbato(but) {
var i = 0;
for (; i < rgbs.length; i++) {
if (rgbs[i] != but) {} else {
break;
}
}
var sx = document.getElementById("rgbjie").offsetLeft;
var tx = sx+panel.offsetLeft+10;
window.onmousemove = function() {
rgbago(i, tx);
}
}
function upms() {
window.onmousemove = function() {}
}
function inputc(ins) {
for (var i = 0; i < colorc16.length; i++) {
if (colorc16[i] == ins) {
if (parseInt(colorc16[i].value) < 256) {
colorrgba[i] = colorc16[i].value;
} else {
colorrgba[i] = colorc16[i].value = 255;
}
}
};
colorrgb();
getrgbw();
}
function getrgbw() {
for (var i = 0; i < 3; i++) {
rgbs[i].style.marginLeft = (colorrgba[i]/2-5)+"px";
tiaos[i].style.width = (colorrgba[i]/2)+"px";
}
}
function rgbago(i, sx) {
//rgb格式颜色更改
event = arguments.callee.caller.arguments[0] || window.event || event;
var x = event.clientX || event.pageX;
var ox = x-sx;
if (i <= 2) {
if (ox >= 0 && ox <= 127.5) {
rgbs[i].style.marginLeft = (ox-5)+"px";
tiaos[i].style.width = ox+"px";
colorrgba[i] = ox*2;
colorc16[i].value = ox*2;
}
} else {
ox -= 27.5;
if (ox >= 0 && ox <= 100) {
rgbs[i].style.marginLeft = (ox-5)+"px";
tiaos[i].style.width = ox+"px";
colorrgba[i] = ox/100;
}
}
colorrgb();
}
//面本整体位移
function panto() {
window.onmousemove = function() {
pango();
}
}
function pango() {
//移动调色板
event = arguments.callee.caller.arguments[0] || window.event || event;
var x = event.clientX || event.pageX;
var y = event.clientY || event.pageY;
panel.style.top = (y-5)+"px";
panel.style.left = (x-50)+"px";
}
//鼠标悬停预览
function t_test() {
t_v.clearRect(0, 0, canvas_t.width, canvas_t.height);
event = arguments.callee.caller.arguments[0] || window.event || event;
var x = event.clientX || event.pageX;
var y = event.clientY || event.pageY;
var ox = x/$(window).width()*canvas_t.width;
var oy = y/$(window).height()*canvas_t.height;
if (!xiangp) {
t_v.fillStyle = colortest.style.backgroundColor;
t_v.beginPath();
t_v.arc(ox, oy, basize/2, 0, Math.PI*2, true);
t_v.closePath();
t_v.fill();
} else {
t_v.fillStyle = "#000000";
t_v.strokeRect((ox-(basize/2)), (oy-(basize/2)), basize, basize);
}
}
function typeos(ose) {
types = ose.value;
}
//绘制预览
function painting() {
event = arguments.callee.caller.arguments[0] || window.event || event;
var x = event.clientX || event.pageX;
var y = event.clientY || event.pageY;
var ox = x/$(window).width()*canvas_t.width;
var oy = y/$(window).height()*canvas_t.height;
if (!xiangp) {
switch (types) {
case "1":
case 1:
v_v.lineTo(ox, oy);
t_v.arc(ox, oy, basize/2, 0, Math.PI*2, true);
t_v.closePath();
t_v.fill();
break;
case "2":
v_v.lineTo(ox, oy);
v_v.stroke();
break;
case "3":
v_v.lineTo(ox, oy);
v_v.stroke();
v_v.closePath();
v_v.beginPath();
v_v.lineTo(ox, oy);
break;
}
} else {
t_v.clearRect(0, 0, canvas_t.width, canvas_t.height);
t_v.fillStyle = "#000000";
t_v.strokeRect((ox-(basize/2)), (oy-(basize/2)), basize, basize);
v_v.clearRect((ox-(basize/2)), (oy-(basize/2)), basize, basize);
}
// v_v.closePath();
// v_v.beginPath();
// v_v.lineTo(ox,oy);
// v_v.beginPath();
// v_v.lineTo(ox,oy);
// v_v.fill();
// t_v.lineTo(ox,oy);
}
function ready() {
//开始绘画的起始步骤（鼠标被按下）
event = arguments.callee.caller.arguments[0] || window.event || event;
var x = event.clientX || event.pageX;
var y = event.clientY || event.pageY;
var ox = x/$(window).width()*canvas_t.width;
var oy = y/$(window).height()*canvas_t.height;
t_v.clearRect(0, 0, canvas_t.width, canvas_t.height);
v_v.strokeStyle = colortest.style.backgroundColor;
v_v.beginPath();
v_v.lineWidth = basize;
v_v.moveTo(ox, oy);
canvas_t.onmousemove = function() {};
window.onmousemove = function() {
painting();
};
}
function baocun() {
var a = document.createElement('a');
a.href = canvas_v.toDataURL();
a.download = this;
a.click();
}
function cachu(but) {
if (!xiangp) {
but.style.backgroundColor = "#f00";
} else {
but.style.backgroundColor = "#ca9";
}
xiangp = !xiangp;
}
</script>
<style>
@keyframes myfirst
{
0% {
box-shadow: inset 0 0 0px 0px #5be4ff;
}
25% {
box-shadow: inset 0 0 14px 0px #0be0fa;
}
50% {
box-shadow: inset 0 0 7px 0px #5be4ff;
}
100% {
box-shadow: inset 0 0 30px 1px #aaccff;
}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {
box-shadow: inset 0 0 0px 0px #5be4ff;
}
25% {
box-shadow: inset 0 0 14px 0px #0be0fa;
}
50% {
box-shadow: inset 0 0 7px 0px #5be4ff;
}
100% {
box-shadow: inset 0 0 30px 1px #aaccff;
}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% {
box-shadow: inset 0 0 0px 0px #5be4ff;
}
25% {
box-shadow: inset 0 0 14px 0px #0be0fa;
}
50% {
box-shadow: inset 0 0 7px 0px #5be4ff;
}
100% {
box-shadow: inset 0 0 30px 1px #aaccff;
}
}
@-o-keyframes myfirst /* Opera */
{
0% {
box-shadow: inset 0 0 0px 0px #5be4ff;
}
25% {
box-shadow: inset 0 0 14px 0px #0be0fa;
}
50% {
box-shadow: inset 0 0 7px 0px #5be4ff;
}
100% {
box-shadow: inset 0 0 30px 1px #aaccff;
}
}
/**/
@keyframes mycolor
{
0% {
color: #e27f7f;
}
25% {
color: #041f27;
}
50% {
color: #7cd3ef;
}
100% {
color: #e3ff09;
}
}
@-moz-keyframes mycolor
{
0% {
color: #e27f7f;
}
25% {
color: #041f27;
}
50% {
color: #7cd3ef;
}
100% {
color: #e3ff09;
}
}
@-webkit-keyframes mycolor
{
0% {
color: #e27f7f;
}
25% {
color: #041f27;
}
50% {
color: #7cd3ef;
}
100% {
color: #e3ff09;
}
}
@-o-keyframes mycolor
{
0% {
color: #e27f7f;
}
25% {
color: #041f27;
}
50% {
color: #7cd3ef;
}
100% {
color: #e3ff09;
}
}
* {
margin: 0;
padding: 0;
}
body {
-moz-user-select: none;
/*火狐*/
-webkit-user-select: none;
/*webkit浏览器*/
-ms-user-select: none;
/*IE10*/
-khtml-user-select: none;
/*早期浏览器?(文本无法选取)*/
user-select: none;
/*文本无法选择*/
text-shadow: 0px 0px 20px #8be6d1;
}
select {
text-shadow: 0px 0px 20px #8be6d1;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
cursor: crosshair;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
.setcolor {
position: relative;
width: 172px;
height: 120px;
margin: 0 0 0 10px;
}
.icon_lz {
position: absolute;
background: url(i/lz.png) no-repeat 0 0;
background-size: 100% 100%;
widt.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0