功能描述：
1.选择不同的画笔颜色；
2.可以选择画笔的粗细；
3.可将canvas内容放置在提词器中，
（3-1）放在固定的三个画框中，存满后便不能继续保存。
（3-2）放在一个div里，div里动态添加canvas里的内容，div内容超出可以拖拽滚动条查看隐藏的内容。
4. 可以清除画布内容；
5. 可以清除提词器里的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" charset="UTF-8"/>
<title></title>
<script type="text/javascript">
var bot;//画布div
var X,Y,X1,Y1;//坐标
var flag=0;
var time;//定时器ID
var color=0;//记住所选颜色
var lineW=2;//画笔粗细
var canvas;//创建画布
var context;//获取上下文
var isMouseDown=false;//记录鼠标是否按下
window.onload=function(){
//创建画布
canvas=document.getElementById("can");
//获取上下文
context=canvas.getContext("2d");
bot=document.getElementById("bottom");
bot.onmousedown=mouseDownAction;
bot.onmousemove=mouseMoveAction;
document.onmouseup=mouseUpAction;
canvas.mouseout = mouseOutAction;
}
/**
*选中画笔颜色
*/
function pen_click(num){
var chk=document.getElementsByTagName("input");
for(var i=0;i<chk.length;i++){
if(i==num){
chk[i].checked=true;
color=i;
}else {
chk[i].checked="";
}
}
}
/**
* 画笔粗细
*/
function line_wid(num){
lineW=num;
var className_2 = document.getElementById('line_2');
var className_4 = document.getElementById('line_4');
var className_8 = document.getElementById('line_8');
if(num == 2)
{
className_2.src = "img/pen_thin_checked.gif";
className_4.src = "img/pen_thin.gif";
className_8.src = "img/pen_thin.gif";
}
else if(num == 4)
{
className_2.src = "img/pen_thin.gif";
className_4.src = "img/pen_thin_checked.gif";
className_8.src = "img/pen_thin.gif";
}
else if(num == 8)
{
className_2.src = "img/pen_thin.gif";
className_4.src = "img/pen_thin.gif";
className_8.src = "img/pen_thin_checked.gif";
}
}
/**
*鼠标按下
*/
function mouseDownAction(e){
isMouseDown=true;
//记录下鼠标点击的时候的位置
X= e.offsetX;
Y= e.offsetY;
}
/**
*鼠标移动
*/
function mouseMoveAction(e){
if(isMouseDown){
X1= e.offsetX;
Y1= e.offsetY;
drowline(X,Y,X1,Y1);
flag++;
}
}
/**
*鼠标弹起来
*/
function mouseUpAction(e){
isMouseDown=false;
flag=0;
//setTimeout(save_pic, 3000);//1秒后执行保存操作
}
/**
*鼠标移出画布
*/
function mouseOutAction()
{
mouseUpAction();
}
/**
* 绘制
*/
function drowline(num1,num2,num3,num4){
//开启新的路径
if(flag)
context.beginPath();
//移动画笔的初始位置
context.moveTo(num1,num2);
context.lineWidth=lineW;
if(color==0){
context.strokeStyle="red";
}else if(color==1){
context.strokeStyle="green";
}else if(color==2){
context.strokeStyle="blue";
}
//移动画笔的结束位置
context.lineTo(num3,num4);
//开始绘制
context.stroke();
if(flag!=0){
X=X1;
Y=Y1;
}
}
function save_pic(){//保存画图
var div = document.getElementsByClassName("div_show_sign");
var div_text = document.getElementById("div_text").innerHTML;
if(div[div.length-1].innerHTML!=""){
alert("存储空间已满，无法保存，请清除空间！")
}
var str = canvas.toDataURL("image/png",0.92);
console.log('save_pic');
console.log(canvas.toDataURL());
for(var i=0;i<div.length;i++){
if(div[i].innerHTML==""){
var s="<img src='"+str+"' style='width: 150px;height: 150px;'>";
div[i].innerHTML=s;
if(i == 0)
{
document.getElementById('canvas_background').innerHTML = "好";
}
break;
}
}
context.clearRect(0,0,500,500);
//div_text元素里追加img元素
var d1=document.getElementById("div_text");
var img=document.createElement("img");
img.src=str;
img.style.width = '150px';
img.style.height = '150px';
img.className = 'div_text_class';
d1.appendChild(img);
}
function clear_pic(){//清除画布
//验证canvas画布是否为空
var c = document.getElementById("can"); // 获取html的canvas对象
var canvasBlank = false; // 画布内容是否为空：false-否，true-是
if(isCanvasBlank(c)){
canvasBlank = true;
}
context.clearRect(0,0,500,500);
if(canvasBlank)
{
var div = document.getElementsByClassName("div_show_sign");
var div_length = div.length;
for(var i= --div.length ;i >= 0;i--){
if(div[i].innerHTML != ""){
div[i].innerHTML = "";
if(i == 0)
{
document.getElementById('canvas_background').innerHTML = "徐";
}
break;
}
}
var div_text = document.getElementById("div_text");
var div_text_class = document.getElementsByClassName("div_text_class");
var div_text_class_length = div_text_class.length;
if(div_text_class_length > 0)
{
//方案一
div_text_class[--div_text_class_length].remove();
//方案二
<!-- for(var j= --div_text_class_length ;j >= 0;j--){ -->
<!-- div_text_class[j].remove(); -->
<!-- break; -->
<!-- } -->
}
}
}
function clear_save(){//清除保存
var div=document.getElementsByClassName("div_show_sign");
for(var i=0;i<div.length;i++){
div[i].innerHTML="";
}
}
//验证canvas画布是否为空
function isCanvasBlank(canvas) {
var blank = document.createElement('canvas');//系统获取一个空canvas对象
blank.width = canvas.width;
blank.height = canvas.height;
//获取画布内容
var canvas_info = canvas.toDataURL("image/png",0.92);
//获取空画布内容
var blank_info = blank.toDataURL("image/png",0.92)
return canvas_info == blank_info;//比较值相等则为空
}
</script>
</head>
<body style="margin: 30px 20px;">
<div id="right">
<div id="div1" class="div_show_sign"></div>
<div id="div2" class="div_show_sign"></div>
<div id="div3" class="div_show_sign"></div>
</div>
<div id="div_text"></div>
<div id="left">
<div id="top">
<div class="top_left"><!-- 画笔颜色选择 -->
<img src="img/pen_red.gif" style="border: 2px solid transparent;width:30px;" onclick="pen_click(0)"><input type="checkbox" style="position: absolute;top: 400px;left: 108px" checked onclick="pen_click(0)">
<img src="img/pen_green.gif" style="border: 2px solid transparent;width:30px;margin-left:10px;" onclick="pen_click(1)"><input type="checkbox" style="position: absolute;top: 400px;left: 155px" onclick="pen_click(1)">
<img src="img/pen_blue.gif" style="border: 2px solid transparent;width:30px;margin-left:10px;" onclick="pen_click(2)"><input type="checkbox" style="position: absolute;top: 400px;left: 202px" onclick="pen_click(2)">
</div>
<div class="top_right"><!-- 画笔粗细选择 -->
<img id="line_2" src="img/pen_thin_checked.gif" style="border: 2px solid transparent;width:10px;" onclick="line_wid(2)">
<img id="line_4" src="img/pen_thin.gif" style="border: 2px solid transparent;width:20px;" onclick="line_wid(4)">
<img id="line_8" src="img/pen_thin.gif" style="border: 2px solid transparent;width:30px;" onclick="line_wid(8)">
</div>
</div>
<div id="bottom"><!-- 画板 -->
<!-- <canvas id="can" width="500" height="500" style="background-color: #a9a9a942;"></canvas> -->
<!-- <canvas id="can" width="320" height="320" style="background:url(img/square.png) no-repeat center;background-size:200% 200%"></canvas> -->
<!-- 方案一 -->
<!--
<canvas id="can" width="320" height="320"></canvas>
<div style="width:370px;height:370px;margin-top: -350px;margin-left: -25px; ">
<img class="" style="width:370px;height:370px;" src="img/square.png" >
</div>
-->
<!-- 方案二 -->
<canvas id="can" width="320" height="320" style="z-index:99;"></canvas>
<div id="canvas_background" style="font-size:200px;position:absolute;z-index:9;width: 320px;height: 320px;margin-top: -328px;margin-left: 0px;background:url(img/square.png) no-repeat center;background-size:100% 100%">
徐
</div>
</div>
</div>
<div class="bottom">
<input type="button" value="保存图片" style="position: absolute;top: 760px;left: 0px;margin-left:30px;" onclick="save_pic()">
<input type="button" value="重签上一字" style="position: absolute;top: 760px;left: 66px;margin-left:30px;" onclick="clear_pic()">
<input type="button" value="清除保存" style="position: absolute;top: 760px;left: 132px;margin-left:45px;"οnclick="clear_save()">
</div>
<input type="hidden" id="mouse_down_tag">
</body>
<style>
*{
margin: 0px;
padding: 0px;
}
#left{
width: 500px;
height: 550px;
}
.top_left{
margin-left: 50px;
float: left;
}
.top_right{
margin-right: 50px;
float: right;
}
#bottom{
width: 320px;
height: 320px;
border: solid 2px coral;
float: left;
margin-top:5px;
}
#right{
width: 520px;
height: 180px;
border: solid 2px red;
margin-top:30px;
}
.div_show_sign{
width: 150px;
height: 150px;
border: solid 2px orange;
margin: 15px 0 0 15px;
float: left;
}
#div_text{
width: 520px;
height: 150px;
border: solid 2px red;
margin-top: 5px;
/*flex 布局*/
display: flex;
/*实现垂直居中*/
align-items: center;
/*实现水平居中*/
justify-content: center;
text-align: justify;
overflow-x: auto;
}
#canvas_background{
/*flex 布局*/
display: flex;
/*实现垂直居中*/
align-items: center;
/*实现水平居中*/
justify-content: center;
text-align: justify;
opacity: 0.3;
}
</style>
</html>
219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
