<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>svg demo</title>
</head>
<body>
<svg width="500" height="500" style="background-color: #398439" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100" rx="20" ry="20" style="fill:yellowstroke-width:3stroke:red"/>
</svg>
</body>
</html>
rect标签参数解析：
rect 元素的 width 和 height 属性可定义矩形的高度和宽度，现在给矩形的宽为300，高为100
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色
rx和ry为圆角，不设置时默认直角
HTML没有实现矩形的标签，可以借助CSS来完成。使用CSS3的border-radius属性，即可完成圆角矩形。border-radius属性的具体用法如下：
border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。
默认值：0
继承性：no
版本：CSS3
JavaScript 语法：object.style.borderRadius="5px"
语法
border-radius: 1-4 length|% / 1-4 length|%
（注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。）
值 描述 测试
length定义圆角的形状。测试
%以百分比定义圆角的形状。测试
例子 1
border-radius:2em
等价于：
border-top-left-radius:2em
border-top-right-radius:2em
border-bottom-right-radius:2em
border-bottom-left-radius:2em
例子 2
border-radius: 2em 1em 4em / 0.5em 3em
等价于：
border-top-left-radius: 2em 0.5em
border-top-right-radius: 1em 3em
border-bottom-right-radius: 4em 0.5em
border-bottom-left-radius: 1em 3em
第一段是画板代码。第二段是拖动和点击的代码想画之后再拖动好麻烦，我地方法只能是记住画的矩形坐标之后判断鼠标点击点再坐标内
就拖动画板，太麻烦了，如果找到好的方法贴出来。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style>
*{margin: 0padding: 0}
canvas{background: #fff}
</style>
<body>
<canvas width=1200 height=800></canvas>
<script>
var oC = document.getElementsByTagName('canvas')[0]
var gd = oC.getContext('2d')
gd.beginPath()
oC.onmousedown = function(ev){
gd.moveTo(ev.pageX,ev.pageY)
oC.onmousemove = function(ev){
gd.lineTo(ev.pageX,ev.pageY)
console.log(ev.pageX,ev.pageY)
gd.strokeStyle = "red"
gd.stroke()
}
oC.onmouseup = function(){
oC.onmousemove = null
oC.onmouseup = null
}
ev.preventDefault()
}
</script>
</body>
</html>
=============================
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style>
*{margin: 0padding: 0}
div{width: 100pxheight: 100pxbackground: redposition: absolutetop: 0left: 0cursor: pointer}
</style>
</head>
<body>
<div></div>
<script>
var oDiv = document.getElementsByTagName('div')[0]
oDiv.onmousedown = function(ev){
var oEvent = ev || event
var disX = oEvent.pageX - oDiv.offsetLeft
var disY = oEvent.pageY - oDiv.offsetTop
document.onmousemove = function(ev){
var oEvent = ev || event
var l = oEvent.pageX - disX
var t = oEvent.pageY - disY
oDiv.style.top = t + 'px'
oDiv.style.left = l + 'px'
}
document.onmouseup = function(){
document.onmousemove = null
document.onmouseup = null
}
}
oDiv.ondblclick = function(){
oDiv.style.display = 'none'
}
</script>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）