基础操作

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><!-- canvas 三要素idwidth:画布内容宽度像素大小(与style 标签的宽度是有区别的)height:画布内容高度像素的大小--><canvas id="convas1" width="600" height="600"></canvas></body><script type="text/javascript">// 找到画布对象var convas = document.querySelector("#convas1")//拿到画笔()上下文对象var ctx = convas.getContext("2d")//打印画笔属性console.log(ctx)//绘制路径  矩形,其他的调用其他绘制方法ctx.rect(60,60,200,200)ctx.fillStyle="#ff0000"//绘制完毕后填充ctx.fill()//描边颜色ctx.strokeStyle="#0000FF"//描边渲染路径ctx.stroke()</script>
</html>

画笔属性

绘制线

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><!-- canvas 三要素idwidth:画布内容宽度像素大小(与style 标签的宽度是有区别的)height:画布内容高度像素的大小--><canvas id="convas1" width="600" height="600"></canvas></body><script type="text/javascript">// 找到画布对象var convas = document.querySelector("#convas1")//拿到画笔()上下文对象var ctx = convas.getContext("2d")//打印画笔属性console.log(ctx)//开始路径ctx.beginPath()//起始点ctx.moveTo(50,50)//设置进过某个位置ctx.lineTo(50,200)ctx.lineTo(100,300)//结束路径 会使最后一个点 和 起始点 链接到一起ctx.closePath()//第二条线ctx.moveTo(200,60)ctx.lineTo(200,400)ctx.fillStyle="#ff0000"//绘制完毕后填充//ctx.fill()//描边颜色ctx.strokeStyle="#0000FF"//描边渲染路径ctx.stroke()</script>
</html>

其他绘制文本圆形等查阅文档

Canvas实现画板

js画布Canvas相关推荐

原生js实现canvas画布中绘制、移动、拖拽、删除矩形（如简易截图工具）
功能描述待图片上传并加载完成后,重新生成画布: 鼠标在画布区域内绘制,移动,拖拽,删除矩形(如截图工具一般): isboundary() 判断是否需要判断边界问题,默认false. 效果截图实现代 ...
html+js：画布canvas + 绘制简单矩形
html5支持canvas标签 canvas创建一个画布,通过.getContext方法创建一个CanvasRenderingContext2D对象进行图案的绘制,具体的方法可以前往HTML Canv ...
JS关于canvas画布小笔记
JS画布笔记 1. 实现画布 var canvas = document.getElementById("mycanvas"); var ctx = canvas.getConte ...
Chart.js清空canvas画布 clearRect()等canvas方法擦除失败（附完整代码）
Chart.js清空canvas画布 clearRect等canvas方法擦除失败一.直接移除DOM对象方式原因方法二.完整代码 html javascript chart.js画图方法三. ...
前端：JS/38/canvas状态的保存和恢复（canvas常用状态大全），canvas画布中图像的变形
canvas状态的保存和恢复 Saving and restoring state 在了解变形之前,我先介绍两个在你开始绘制复杂图形时必不可少的方法. canvas.save() 保存画布(canva ...
js:三种简单的矩形绘制方法（画布canvas）
之前提到过画布canvas通过lineto方法绘制矩形,实际上画布canvas还有三种其他更简便的方法绘制矩形,而lineto方法可以绘制任何直线图形三种绘制矩形的方法分别是: rect();创建矩 ...
captcha.js一个生成验证码的插件，使用js和canvas生成
一.captcha`captcha.js`是一个生成验证码的插件,使用js和canvas生成的,确保后端服务被暴力攻击,简单判断人机以及系统的安全性,体积小,功能多,支持配置. 验证码插件内容,包含1 ...
原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单 2, 只需引入 ...
html5画板功能,JS实现canvas简单小画板功能
本文实例为大家分享了JS实现canvas简单小画板的具体代码,供大家参考,具体内容如下 Html部分: Document CSS部分: *{ margin: 0; padding: 0; list-s ...
html canvas直线进度条,js+HTML5 canvas 实现简单的加载条(进度条)功能示例
本文实例讲述了js+HTML5 canvas 实现简单的加载条(进度条)功能.分享给大家供大家参考,具体如下: www.jb51.net canvas实现加载条动画 /* * 获取canvas, ca ...

js画布Canvas

基础操作

画笔属性

绘制线

其他绘制文本圆形等查阅文档

Canvas实现画板

js画布Canvas相关推荐

最新文章

热门文章