canvas-绘制矩形-读书笔记
使用<canvas>元素,必须先设置其width和height属性,指定可以绘图的区域大小。
要在画布上绘图,需要取得绘图上下文,也就是要调用getContext()方法并传入上下文的名字。在使用<canvas>元素前,首先要检测下getContext()方法是否存在,不是所有的版本的浏览器都支持的。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><canvas id="drawing" width=" 200" height="200">A drawing of something.</canvas><script type="text/javascript">var drawing = document.getElementById("drawing");//确定浏览器支持<canvas>元素if(drawing.getContext) {var context = drawing.getContext("2d");//更多代码 }</script></body></html>
toDataURL()方法,可以导出canvas元素上绘制的图像,这个方法接受一个参数,即图像的MIME类型格式,而且适合用于创建图像的任何上下文。栗如:
var drawing = document.getElementById("drawing");//确定浏览器支持canvas元素 if(drawing.getContext){var imgURI = drawing.toDataURL("image/png");//显示图像 var image = document.createElement("img");image.src = imgURI;document.body.appendChild(image); }
2D上下文的两周基本绘图操作是填充和描边。填充,就是用指定的样式(颜色、渐变或图像)填充图形,描边就是只在图形的边缘画线。这两个操作结果取决于两个属性:fillStyle和strokeStyle,这两个属性的值可以是字符串、渐变对象或模式对象,默认值都是“#000000”。
矩形是唯一一种可以直接在2D上下文中绘制的形状。与矩形相关的方法包括fillRect()、strokeRect()和clearRect()。这三个方法都能接收4个参数:矩形的x坐标,矩形的y坐标,矩形宽度和矩形高度,这些参数的单位都是像素。
通过fillRect()方法绘制矩形。举栗:
var drawing = document.getElementById("drawing");//确定浏览器支持<canvas>元素 if(drawing.getContext) {var context = drawing.getContext("2d");//绘制红色矩形context.fillStyle = "#ff0000";context.fillRect(10, 10, 50, 50);//绘制半透明的蓝色矩形context.fillStyle = "rgba(0,0,255,0.5)";context.fillRect(30, 30, 50, 50); }
通过strokeRect()方法绘制矩形。举栗:
var drawing = document.getElementById("drawing"); //确定浏览器支持<canvas>元素 if (drawing.getContext){var context = drawing.getContext("2d");//绘制红色描边矩形context.strokeStyle = "#ff0000";context.strokeRect(10, 10, 50, 50);//绘制半透明的蓝色描边矩形context.strokeStyle = "rgba(0,0,255,0.5)";context.strokeRect(30, 30, 50, 50); }
参考资料
《javascript高级程序设计(第3版)》第15章 使用Canvas 绘图
转载于:https://www.cnblogs.com/winteronlyme/p/6727682.html
canvas-绘制矩形-读书笔记相关推荐
- android之canvas绘制矩形
需求:想实现使用canvas绘制矩形 实现如下: @SuppressLint("AppCompatCustomView") public class MyImageView ext ...
- 教你用canvas绘制矩形
:点上面关注免费学习前端知识! 矩形是唯一一种可以直接在2D上下文中绘制的形状.与矩形有关的方法包括fillRect() . strokeRect() 和 clearRect() .这三个方法都能接收 ...
- html 绘制矩形,HTML5中使用canvas绘制矩形
canvas是HTML5中新增的一个元素,使用Canvas可以绘制任何你喜欢的图形.先来认识什么是Canvas? 1.在页面上放置一个canvas元素,就相当于在页面上放置了一块"画布&qu ...
- Canvas | 绘制矩形、实心空心圆、三角形、线条
#Canvas ##基本属性 一个画布在网页中是一个矩形框 默认情况下 canvas 元素没有边框和内容.使用 style 属性来添加边框: canvas 元素本身是没有绘图能力的.所有的绘制工作必须 ...
- canvas绘制矩形
canvas提供了三个API,分别是: 1.绘制一个填充的矩形 fillRect(x, y, width, height) 2.绘制一个矩形的边框 strokeRect(x, y, w ...
- 《DirectX 9.0 3D游戏开发编程基础》 第二章 绘制流水线 读书笔记
模型的表示 场景:物品或模型的集合 任何物品都可以用三角形网络逼近表示.我们经常用以下术语描述三角形网络:多边形(polygons).图元(primitives).网络几何单元(mesh geomet ...
- 微信小程序canvas绘制矩形
绘制边框矩形 ctx.beginPath(); //矩形边框 ctx.lineWidth=36 * rpx; //矩形变宽颜色 ctx.strokeStyle="#DBDBDB"; ...
- canvas基础-绘制矩形(1)
1.canvas基础知识 canvas元素是HTML5中新增的一个重要的元素,专门用来绘制图形,不过canvas本身不具备画图的能力,在页面中放置了canvas元素,就相当于在页面中放置了一块矩形的& ...
- html5 Canvas 绘制基本图形 从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
html5: Canvas 绘制基本图形 从绘制直线 到 路径 Jack Lee 的 CSDN 博客 邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.n ...
最新文章
- 【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )
- Collections工具类常用API使用示例
- springboot security 权限不足_SpringBoot 整合 SpringSecurity 之起源篇(零)
- Spring DI注入规则
- [Ext JS]Grid的列过滤
- 2020没赚到,你真的该好好想想了
- tf.train.Example的用法(转)
- 6688常见问题FAQ
- 从条件概率到贝叶斯公式
- er studio mysql_解决ER\Studio无法生成mysql列注释问题
- 浅谈算法书籍学习路线
- 非线性曲线拟合和多项式曲线拟合
- Android——TextView指定字符串颜色高亮,实现类似微信、支付宝搜索结果中搜索字段高亮的效果
- 目前ipad协议和安卓协议能实现微信百分之90功能 扫码进群 注册 阅读 关注支付功能等都能实现吗?ipad协议源码
- 当前主流服务器型号,当前服务器的主流品牌 型号 配置
- 显示屏漏光会有什么影响
- 微信小程序java美食厨房食谱大全分享系统
- 小程序如何开通微信支付?
- 【软件测试】——编写测试用例实例
- Celery启动定时任务遇到报错