简单画布canvas的画法

1.canvas画直线

<body><canvas id="canvas" width="400px" height="400px">版本过低！</canvas>
</body>

<script>//1.获取画布var canvas = document.getElementById('canvas')//2.获取画布上下文var ctx = canvas.getContext('2d');//3.开启一条路径ctx.beginPath()//4.确定起始点ctx.moveTo(100,100)//5.确定结束点ctx.lineTo(300,100)//在着色之前设置线ctx.strokeStyle='skyblue'// 线宽ctx.lineWidth=5;// 6.着色ctx.stroke()// 7.结束路径ctx.closePath()
</script>

2.封装

<body><canvas id="canvas" width="400px" height="400px">版本过低！</canvas>
</body>
<script>var canvas = document.getElementById('canvas')var ctx = canvas.getContext('2d')drawLine(100,100,300,100,'pink',2)drawLine(300,100,300,300,'purple',2)drawLine(100,300,300,300,'skyblue',2)drawLine(100,100,100,300,'green',2)function drawLine(x1,y1,x2,y2,color,width){ctx.beginPath()ctx.moveTo(x1,y1)ctx.lineTo(x2,y2)ctx.strokeStyle=colorctx.strokeStyle=colorctx.lineWidth=widthctx.stroke()ctx.closePath()}
</script>

3.实心空心矩形


<body><canvas id="canvas" width="400px" height="400px">版本过低！</canvas>
</body>
<script>var canvas = document.getElementById('canvas')var ctx = canvas.getContext('2d')// 画矩形ctx.rect(50,50,300,200)// 先填充后描边// 填充ctx.fillStyle='skyblue'ctx.fill()// 描边ctx.strokeStyle='pink'ctx.lineWidth=5ctx.stroke()// 实心矩形ctx.fillStyle='pink'ctx.fillRect(50,300,100,100)// 空心矩形ctx.fillStyle='blue'ctx.lineWidth=2ctx.strokeRect(250,300,100,100)</script>

4.绘制图片

 var img =new Image()img.src='下载.png'// onload加载成功触发// onerror加载失败触发img.onload=function(){// 图片宽高// console.log(img.height,img.width);//img对象,起始位置// ctx.drawImage(img,0,0)//img对象,起始位置,设置图片大小ctx.drawImage(img,0,0,200,200)// 剪切图片,定位剪切的位置//img对象,切起始位置,设置切图片大小,图片放起始位置,设置切图片大小// ctx.drawImage(img,70,70,270,260,0,0,400,400)}

简单画布canvas的画法相关推荐

html+js：画布canvas + 绘制简单矩形
html5支持canvas标签 canvas创建一个画布,通过.getContext方法创建一个CanvasRenderingContext2D对象进行图案的绘制,具体的方法可以前往HTML Canv ...
js:三种简单的矩形绘制方法（画布canvas）
之前提到过画布canvas通过lineto方法绘制矩形,实际上画布canvas还有三种其他更简便的方法绘制矩形,而lineto方法可以绘制任何直线图形三种绘制矩形的方法分别是: rect();创建矩 ...
丘比特之箭——简单的canvas动画
刚学HTML的canvas,感觉这个家伙挺神奇的,而且人们给我的感觉它很简单,但事实应该不是这样的.起码对于我来说不是简单的,学啥都的有持之以恒的心啊.希望自己可以坚持,带着好奇的心去感受js动画带给 ...
html5画布作品,10个会让你惊叹不已的HTML5画布(CANVAS)技术应用演
下面的这是10个HTML5画布(canvas)技术效果演示一定会让你惊叹不已.当然,也许你也会认为,过去在老式浏览器中用flash技术也能实现这样的效果.但是,下面的这些演示只使用了现代浏览器里自带技 ...
【Android】自定义View、画布Canvas与画笔Paint
安卓自定义View其实很简单.这个View可以像<[Android]利用Java代码布局,按钮添加点击事件>(点击打开链接)一样,利用Java代码生成一系列的组件.也可以配合画布Canva ...
[OHIF-Viewers]医疗数字阅片-医学影像-querySelector() 选择器语法-将画布(canvas)图像保存成本地图片的方法...
[OHIF-Viewers]医疗数字阅片-医学影像-querySelector() 选择器语法-将画布(canvas)图像保存成本地图片的方法将画布(canvas)图像保存成本地图片的方法使用HT ...
html5好看画布,10个会让你惊叹不已的HTML5画布(CANVAS)技术应用演
下面的这是10个HTML5画布(canvas)技术效果演示一定会让你惊叹不已.当然,也许你也会认为,过去在老式浏览器中用flash技术也能实现这样的效果.但是,下面的这些演示只使用了现代浏览器里自带技 ...
html画布设计,10个会让你惊叹不已的HTML5画布(canvas)技术应用
随着老式浏览器(IE6)的逐渐淘汰,现代浏览器(火狐浏览器,谷歌浏览器,Opera,Safari)走向主流,越来越多的HTML5和CSS3技术开始出现在各种网站上.这些最新的网页技术究竟能给我们今后的 ...
未来技术 html5 app,未来web浏览技术提前体验：10个会让你惊叹不已的HTML5画布(canvas)技术应用演示...
随着老式浏览器(IE6,IE8)的逐渐淘汰,现代浏览器(火狐浏览器,谷歌浏览器,Opera,Safari)走向主流,越来越多的HTML5和CSS3技术开始出现在各种网站上.这些最新的网页技术究竟能给我 ...

简单画布canvas的画法

简单画布canvas的画法相关推荐

最新文章

热门文章