html图片山写字,canvas实现田字格写字效果
HtmlCssJs
此浏览器不支持canvas
清除
#canvas{display:block;margin:0 auto;}
/*清除器样式*/
#controller{margin: 0 auto;}
.op_btn{float: right;margin: 20px 0 0 0;border: 2px solid #aaa;
width: 80px;height: 40px;line-height: 40px;font-size: 20px;text-align: center;
border-radius: 5px;cursor: pointer;background-color: white;
font-weight: bold;font-family:Arial;}
.op_btn:hover{background: #def;}
.clearfix{clear: both;}
/*颜色按钮*/
.color_btn{
float: left;
margin: 16px 0 0 10px;
border: 5px solid white;
width: 40px;
height: 40px;
border-radius: 5px;
cursor: pointer;
}
.color_btn:hover{border:5px solid violet;}
/*默认边框*/
.color_btn_selected{border:5px solid blueviolet;}
#black_btn{background-color: black;}
#blue_btn{background-color: blue;}
#green_btn{background-color: green;}
#red_btn{background-color: red;}
#orange_btn{background-color: orange;}
#yellow_btn{background-color: yellow;}
window.οnlοad=function(){
//定义画布常量宽高(如果屏幕的大小-20比650小的话则在移动端,反之在pc端)
var canvasWidth=Math.min(650,$(window).width()-20);
var canvasHeight=canvasWidth;
//默认鼠标按下为false
var isMouseDown=false;
//上一次鼠标记录的位置
var lastLoc={x:0,y:0};
//设置当前默认颜色
var strokeColor="black";
//获取画布
var canvas=document.getElementById('canvas');
//获取画布上下文
var context=canvas.getContext('2d');
//设置画布大小
canvas.width=canvasWidth;
canvas.height=canvasHeight;
//调用画布
drawGrid();
//动态设置 #controller宽度,让其适应手机屏幕
$(" #controller").css('width',canvasWidth+'px');
//清除画布操作
$('#clear_btn').click(function(){
//清除画布上的字体
context.clearRect(0,0,canvasWidth,canvasHeight);
//重新绘画
drawGrid();
});
//颜色更换
$('.color_btn').click(function(e){
//选中按钮时移除掉边框
$('.color_btn').removeClass('color_btn_selected');
//再在当前按钮添加边框
$(this).addClass('color_btn_selected');
//把当前选中的按钮颜色赋值给画笔
strokeColor=$(this).css('background-color');
});
//鼠标在画布按下时
canvas.οnmοusedοwn=function(e){
e.preventDefault();
isMouseDown=true;
//console.log("mouse Down!");
//e.clientX和e.clientY传入当前屏幕坐标
lastLoc=windowToCanvas(e.clientX,e.clientY);
//alert(loc.x+","+loc.y);
};
//鼠标在画布按下松开后
canvas.οnmοuseup=function(e){
e.preventDefault();
isMouseDown=false;
//console.log("mouse Up!");
};
//鼠标离开画布时
canvas.οnmοuseοut=function(e){
e.preventDefault();
isMouseDown=false;
//console.log("mouse out!");
};
//鼠标移动在画布上时
canvas.οnmοusemοve=function(e){
e.preventDefault();
if(isMouseDown){
//console.log("mouse move!");
var curLoc=windowToCanvas(e.clientX,e.clientY);
//draw
context.beginPath();
context.moveTo(lastLoc.x,lastLoc.y);
context.lineTo(curLoc.x,curLoc.y);
//设置画笔颜色
context.strokeStyle=strokeColor;
//设置画笔粗细
context.lineWidth=10;
//填补空白
context.lineCap="round";
//线条更加平滑
context.lineJoin="round";
//画线
context.stroke();
//当再画时,当前就是等于上一次开始的时候
lastLoc=curLoc;
}
};
//*屏幕坐标与canvas坐标的转换
function windowToCanvas(x,y){
//创建canvas所对应的包围盒
var bbox=canvas.getBoundingClientRect();
//返回屏幕x坐标减去bbox距离左边的间距就是canvas距离左边的位置,顶部同理左边
return{x:Math.round(x-bbox.left),y:Math.round(y-bbox.top)};
};
function drawGrid(){
//保存当前画布
context.save();
//设置画布颜色
context.strokeStyle="rgb(230,11,9)";
context.beginPath();
context.moveTo(3,3);
context.lineTo(canvasWidth-3,3);
context.lineTo(canvasWidth-3,canvasHeight-3);
context.lineTo(3,canvasHeight-3);
context.closePath();
context.lineWidth=6;
context.stroke();
//四条直线
context.beginPath();
context.moveTo(0,0);
context.lineTo(canvasWidth,canvasHeight);
context.moveTo(0,canvasHeight);
context.lineTo(canvasWidth,0);
context.moveTo(0,canvasHeight/2);
context.lineTo(canvasWidth,canvasHeight/2);
context.moveTo(canvasWidth/2,0);
context.lineTo(canvasWidth/2,canvasHeight);
context.lineWidth=1;
context.stroke();
context.restore();
}
}
↑上面代码改变,会自动显示代码结果
jQuery调用版本:2.1.4
html图片山写字,canvas实现田字格写字效果相关推荐
- HTML 星空动图背景(canvas+JS)
HTML 星空动图背景(canvas+JS) 前几天看项目的时候看到一个星空动图,当时还以为是拿了一张GIF做背景,结果看代码找半天没找到,后来仔细阅读代码才发现原来是用canvas和JS做的,然后我 ...
- 计算机写字的好处,喜欢写字的十大好处!
原标题:喜欢写字的十大好处! 书法作为国人最普遍.最广泛喜欢的国粹,不仅裨益身心,而且作为文化,成为了国人精神气象和文化风骨,越来越成为全民喜欢的一项"运动".习得一手好字,是多么 ...
- html编写田字格,canvas画田字格与米字格
#div1 { width: 400px; height: 400px; } 转载自canvas画田字格与米字格 你的浏览器不支持canvas! var oCanvas = document.getE ...
- 西门子S7-1200二轴V80伺服写字案例程序运动控制 写字机自动化机械控制,高速脉冲
西门子S7-1200二轴V80伺服写字案例程序运动控制 写字机自动化机械控制,高速脉冲 已组态好X轴 Y轴 有效行程200mm 实现功能:点动,抬笔落笔,紧急停止,定位 写字偏移 自动写字 默认字为: ...
- canvas三角函数模拟水波效果
原文:canvas三角函数模拟水波效果 最近项目中,ui设计了个水波效果的背景动画,然而并没有gif或svg动画,开始试着用css实现了一下,动画效果并不是很好,网上查了下基本都是用贝赛尔曲线实现,想 ...
- php 3d animation,如何用HTML5的Canvas制作3D动画效果
HTML5的诞生给web前端界带来了不小轰动,像什么动画旋转.图片滑块.图片轮播等等这些3D特效,也引发了不少朋友想要学习HTML5的好奇心.最近我一直在做canvas动画效果,发现canvas这个东 ...
- 前端必备的Canvas接口和动画效果的总结
来源 | https://segmentfault.com/a/1190000021998875 概述 <canvas>元素用于生成图像.它本身就像一个画布,JavaScript 通过操作 ...
- 必备的Canvas接口和动画效果大全
来源 | https://segmentfault.com/a/1190000021998875 1.概述 <canvas>元素用于生成图像.它本身就像一个画布,JavaScript 通过 ...
- 放射性渐变色html,html5 canvas绘制放射性渐变色效果
效果图展示: canvas有些地方还是有点坑的,比如fillRect是方法不是属性,如果写成fillRect=这样是没效果的,而且还不报错.... 这里用到了createRadialGradient这 ...
最新文章
- JavaScript 之 typeof
- Python基本数据类型之列表
- android UI设计时须要注意遵循的设计原则
- [html] 当img标签中的src图片加载失败时,怎么让它变得更美观呢?
- LeetCode MySQL 1205. 每月交易II(union all)*
- 香港理工大学人工智能设计实验室 博士后 招聘
- web_find()函数检查中文字符串失败的处理方法
- jQuery几种常用方法
- 深度学习入门者选择开源框架丨硬创公开课群友问答
- PowerDesigner的CDM模型将低驼峰命名法则的每个大写字母前加_符
- RINEX观测值文件读取(O文件)
- google浏览器网页背景颜色修改
- 加性噪声和乘性噪声、均值滤波器、方框滤波器、中值滤波器、高斯滤波器、双边滤波器
- 什么是Flex布局?
- maxima得到简化行阶梯矩阵(RREF)
- Web前端技术第一节
- python 字符串前面加 u, r, b的含义
- 软件开发项目可行性分析报告样例
- “正交阵”与“特征值和特征向量”
- linux中释放sweep分区,详解Windows系统中如何释放C盘空间