正文
html5箭头,html 箭头
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
html5中使用canvas绘制两点弧线箭头
回答完毕，采纳即可。
!DOCTYPE HTML
html
head
titleyugi/title
meta charset=UTF-8 /
style type="text/css"
/style
script type="text/javascript"
var Eye = function (a, b)
{
this.a = a;
this.b = b;
}
Eye.prototype =
{
constructor : Eye,
g : null,
init : function ()
{
var canvas = document.querySelector ("canvas");
this.g = canvas.getContext ("2d");
return this;
},
drawEyelid : function ()
{
var g = this.g, a = this.a, b = this.b, R = 5;
g.save ();
g.beginPath ();
g.fillStyle = "black";
g.arc (a.x, a.y, R, 0, 2 * Math.PI);
g.fill ();
g.restore ();
g.beginPath ();
g.fillStyle = "red";
g.arc (b.x, b.y, R, 0, 2 * Math.PI);
g.fill ();
g.restore ();
g.beginPath ();
g.strokeStyle = "blue";
g.moveTo (a.x, a.y);
g.lineTo (a.x, a.y);
var r = 300;
g.arcTo (a.x + r, a.y, b.x, b.y, r);
g.lineTo (b.x, b.y);
g.stroke ();
g.restore ();
g.beginPath ();
g.strokeStyle = "pink";
g.moveTo (b.x, b.y);
g.lineTo (b.x, b.y);
g.arcTo (b.x - r, b.y, a.x, a.y, r);
g.lineTo (a.x, a.y);
g.stroke ();
g.restore ();
g.beginPath ();
g.fillStyle = "black";
g.moveTo (b.x, b.y);
g.lineTo (b.x, b.y - 2 * R);
g.lineTo (b.x - 2 * R, b.y - 4);
g.fill ();
g.restore ();
g.beginPath ();
g.moveTo (a.x, a.y);
g.lineTo (a.x, a.y + 2 * R);
g.lineTo (a.x + 2 * R, a.y + 4);
g.fill ();
g.restore ();
}
};
onload = function ()
{
var eye = new Eye (
{
x : 100,
y : 50
},
{
x : 550,
y : 310
});
eye.init ().drawEyelid ();
}
/script
/head
body
body
canvas width="800" height="600"
你的浏览器不支持canvas标签
/canvas
/body
/html
相关问答
Q1: HTML5当箭头放在某个文字链接上时出现一个表格
!DOCTYPE html
html
head
meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
script class="jquery library" src="/js/sandbox/jquery/jquery-1.8.0.min.js" type="text/javascript"/script
titleRunJS 演示代码/title
script
$(function(){
var t=$("table").hide();
$("a").hover(function(){
t.toggle();
});
});
/script
/head
body
a href="###"hover/a
table
div class="son" id="iii"
tr id="child"
th id="td"span id="level_2"*/span版本:/th
/tr
tr
td
divspanx/span移动版/div
/td
td
divspanx/span联通版/div
/td
td
divspanx/span电信版/div
/td
td
divspanx/span双网通/div
/td
td
divspanx/span全网通版/div
/td
td style="border-style:none"
div id="add"add/div
/td
/tr
/div
div class="son"
tr
th id="banban"span id="level_2"*/span容量:/th
/tr
tr
td
divspanx/span16/div
/td
td
divspanx/span32/div
/td
td
divspanx/span电信版/div
/td
td
divspanx/span双网通/div
/td
td
divspanx/span全网通版/div
/td
td style="border-style:none"
div id="add"add/div
/td
/tr
/div
/table
/body
/html
Q2: HTML5初学者笔记
HTML5记录
一、VS code引入插件后运行，终端执行
二、引入外部js文件：
1、js的exports.a = a；方式暂时不知道怎么做
2、直接引入，script之后可以直接使用。参照html-vue项目
3、数据类型
String、Number、Boolean、Null、undefined、symbol、Object、Array、Function
三、 JS显示数据方式：
window.alert()
document.write()
innerHTML=‘’
console.log()
四、 let、const、var
五、全局变量、局部变量注意点
如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。
六、事件：
onchange、onclick、onmouseover、onmouseout、onkeydown、onload…
html dom onclick之类的直接使用，vue是@click，小程序是bindTap
七、 this关键字：
1、在对象方法中， this 指向调用它所在方法的对象。
2、单独使用 this，它指向全局(Global)对象。
3、函数使用中，this 指向函数的所属者。
4、严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。
5、在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素。
6、apply 和 call 允许切换函数执行的上下文环境（context），即 this 绑定的对象，可以将 this 引用到任何对象。
八、 箭头函数：
1、有的箭头函数都没有自己的 this 。 不适合定义一个 对象的方法。
2、当我们使用箭头函数的时候，箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层 的 this 是一样的。
3、箭头函数是不能提升的，所以需要在使用之前定义。
4、使用 const 比使用 var 更安全，因为函数表达式始终是一个常量。
九、闭包：
闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。
直观的说就是形成一个不销毁的栈环境。
闭包会持有父方法的局部变量和参数并且不会随父方法销毁而销毁
不必要的闭包只会增加内存消耗
十、 事件
body事件：onload、onunload
元素事件：onclick、onmouseover、onmouseout、onmousedown、onmouseup、onfocus
事件捕获
document.getElementById(‘demo’).addEventListener(‘事件名’, 方法名, 是否捕获传递)
方法名：如果是相应事件，则只可写方法名methodName，写成methodName()则会自动执行
如果方法需要传递参数，则只可以使用匿名函数， function( { methodName(p1, p2) } );
是否捕获传递：默认false，即冒泡传递
IE8和更早版本： x.attachEvent("onclick", myFunction) ;
十一、Window加载，页面声明周期入口
window.onload = function () { }
十二、数据存储
localStorage不会被自动删除，
sessionStorage 网页关闭会自动删除
cookie
sql
manifest文件
区别：
localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。
sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。
十三、 CSS声明权重（选择器）
内联ID伪类属性类元素/类型通用
!important会改变优先级
十四、 元素隐藏/显示
1、dispatch：none 隐藏 不占用空间
2、visibility：hidden 隐藏，仍然占用空间
3、v-if 存在/不存在
4、v-show 只生成一次，占用内存
十五、 Position
static 默认方式，没有定位
fixed 相对于浏览器窗口固定定位，不占用文档流，其他元素会相对位移
absolute 相对于最近的已定位父元素定位，不占用文档流，其他元素会相对位移
relative 相对于自身的定位
sticky 粘滞定位，基于用户的滚动位置定位
十六、 float
1、只能左右浮动
2、左右浮动，直到外边缘碰到另一个浮动元素
3、浮动之后的元素将围绕它
4、浮动之前的元素不受影响
5、如果是图像浮动，下面的文本流将环绕它
6、clear声明的元素， 属性指定元素两侧不能出现浮动元素。
推荐使用flex布局
十七、 文字显示…
单行
任意行
十八、 box-shadow顺序
十九、 flex布局
容器属性：
属性 / 说明可选值
f方向： lex-direction
换行：flex-wrap
简写：flex-flow
主轴上的对齐方式：justify-content
交叉轴上如何对齐：align-items
多根轴线的对齐方式：align-content。
如果项目只有一根轴线，该属性不起作用
项目item属性:
order：排列顺序，越小越靠前
flex-grow：放大比例，2比1占用的空间大一倍
flex-shrink：缩小比例，默认1，当空间不足时等比例缩小。如果一个项目的属性为0，其他项目都为1，则空间 不足时，前者不缩小
flex-basis：定义了在分配多余空间之前，项目占据的主轴空间
flex ：简写
align-self：允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
Q3: 怎么用html5的canvas实现箭头随着鼠标移动和旋转
下面是源码
主文件
test.htm
!doctype html
html
head
mata charset="utf-8"
title/title
link rel="stylesheet" href="style.css"
/head
body
canvas id="canvas" width="400" height="400"
p :( 抱歉~ br 您的浏览器貌似不支持HTML5的标签"canvas"的说，试试更换成
Chrome,FireFox,IE9.../p
/canvas
script src="arrow.js"/script
script src="utils.js"/script
script
window.onload=function(){
var canvas=document.getElementById("canvas"),
context=canvas.getContext('2d'),
mouse=utils.captureMouse(canvas),
arrow=new Arrow();
arrow.x=canvas.width/2;
arrow.y=canvas.height/2;
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = (window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
return window.setTimeout(callback, 1000/60);
});
}
(function drawFrame(){
window.requestAnimationFrame(drawFrame,canvas);
context.clearRect(0,0,canvas.width,canvas.height);
var dx=mouse.x-arrow.x;
var dy=mouse.y-arrow.y;
arrow.rotation=Math.atan2(dy,dx);
arrow.draw(context);
}());
};
/script
/body
/html
var canvas=document.getElementById(“canvas”)
//即将变量 canvas 作为对 html5 canvas标签id为’canvas’ 的引用
context=canvas.getContext(‘2d’)
//获取canvas该对象后，可在其上进行图形绘制
window.requestAnimationFrame
为了便于JavaScript进行图形的重绘，各大浏览器厂商都提供了各自的API给开发者进行调用，由于各大厂商的对HTML5的支持不同，所以API没有统一，但使用厂商各自的API则在该API在对应浏览器上为最有效率的方式运行。代码中对
用户浏览器做判断，实例化能被成功引用的API接口。如果用户的浏览器没有提供该API,则使用JS的setTimeout。其特性类似于AS的 ENTER_FRAME 事件。
需要用到的2个JS文件
utils.js 可根据传入的对象判断，鼠标所在对象的相对于左上角的坐标值
unction utils(){};
utils.captureMouse=function(element){
var mouse={x:0,y:0};
element.addEventListener('mousemove',function(event){
var x,y;
if(event.pageX || event.pageY){
x=event.pageX;
y=event.pageY;
}else{
x=event.clientX+document.body.scrollLeft+
document.documentElement.scrollLeft;
y=event.clientY+document.body.scrollTop+
document.documentElement.scrollTop;
}
x -= element.offsetLeft;
y -= element.offsetTop;
mouse.x=x;
mouse.y=y;
},false);
return mouse;
};
计算mouse相对于容器的x,y坐标偏移，本质是判断鼠标在浏览器中的鼠标偏移，之后对浏览器中容器宽度和高度进行再次偏移。
arrow.js
绘制一个箭头的js
function Arrow(){ this.x=0; this.y=0; this.color="#ffff00"; this.rotation=0;}Arrow.prototype.draw=function(context){ context.save(); context.translate(this.x,this.y); context.rotate(this.rotation); context.lineWidth=2; context.fillStyle=this.color; context.beginPath(); context.moveTo(-50,-25); context.lineTo(0,-25); context.lineTo(0,-50); context.lineTo(50,0); context.lineTo(0,50); context.lineTo(0,25); context.lineTo(-50,25); context.lineTo(-50,-25); context.closePath(); context.stroke(); context.restore(); };
熟悉AS的Graphics 的coder一定很快能熟悉使用JS的绘图API
style.css
用到的样式表
body{
background-color:#bbb;
}
#canvas{
background-color:#fff;
}
区分canvas 内外的颜色。
Q4: html5带返回箭头的标题栏怎么写
在res/menu/main.xml中可以找到对应的id，非自定义View的icon系统定义的id 是android.R.id.home，标题的id是android.R.id.title，试一下在这添加代码。
Q5: html5 inut number后的箭头怎么去掉
在chrome下：
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
-webkit-appearance: none !important;
margin: 0;
}
Firefox下：
input[type="number"]{-moz-appearance:textfield;}
第二种方案：
将type="number"改为type="tel"，同样是数字键盘，但是没有箭头。
原文链接：
