Javascript如何在网页上实现画图功能

JavaScript012

Javascript如何在网页上实现画图功能,第1张

方法只有一个：

    通过canvas的方式，在画布上画图

步骤：

1、定义一个canvas

2、获取canvas，然后通过画图

示例：canvas 元素来显示一个红色的矩形

<canvas id="myCanvas"></canvas>//定义一个canvas

<script type="text/javascript">

var canvas=document.getElementById('myCanvas')//获取canvas

var ctx=canvas.getContext('2d')

ctx.fillStyle='#FF0000' //图形填充色

ctx.fillRect(0,0,80,100) //绘制一个红色矩形

</script>

你好，

在网页中画椭圆，方式还比较多，最简单的其实不需要使用JS：

<div class="ellipse"></div>

<style>

.ellipse {

  width: 400px

  height: 200px

  border-radius: 50%

  background-color: #000

}

</style>

还有一种不需要使用JS的：

<svg width="800" height="400">

    <ellipse rx="200" ry="100" cx="400" cy="200"></ellipse>

</svg>

当然，这种也可以使用JS来实现，比如：

<svg width="800" height="400" id="J_SvgWrap"></svg>

<script>

var svg = document.getElementById('J_SvgWrap')

var ell = document.createElementNS('http://www.w3.org/2000/svg', 'ellipse')

ell.setAttribute("cx", 400)

ell.setAttribute("cy", 200)

ell.setAttribute("rx", 200)

ell.setAttribute("ry", 100)

svg.appendChild(ell)

</script>

还有一种使用JS实现的方式：

<canvas width="800" height="400" id="J_MyCanvas"></canvas>

<script>

var cvs = document.getElementById('J_MyCanvas')

var ctx = cvs.getContext('2d')

ctx.scale(1, 0.5)

ctx.arc(400, 200, 200, 0, Math.PI * 2)

ctx.fill()

</script>

好了，希望能解决你的问题！