浅谈Canvas的状态绘图

骑猪看日落 2022-06-16 10:11 257阅读 0赞

Canvas是基于状态的绘图。

beginPath核心的作用是：将不同的绘制形态进行隔离，每次执行此方法，表示重新绘制一个路径，与之前绘制的路径可以分开进行样式设置和管理，如颜色、线宽等。

var canvas = document.getElementsByTagName("canvas")[0];    
    if (canvas.getContext) {    
        var context = canvas.getContext("2d");    
        context.beginPath();  
    	context.strokeStyle = "red";
        context.moveTo(100, 100);  
        context.lineTo(200, 200); 
    	context.strokeStyle = "blue";
        context.moveTo(200, 200);  
        context.lineTo(300, 300);  
        context.stroke();  
    }

运行结果：两段的路径颜色均是蓝色。

var canvas = document.getElementsByTagName("canvas")[0];    
    if (canvas.getContext) {    
        var context = canvas.getContext("2d");    
        context.beginPath();  
    	context.strokeStyle = "red";
        context.moveTo(100, 100);  
        context.lineTo(200, 200); 
        context.stroke();  
        context.beginPath();  
    	context.strokeStyle = "blue";
        context.moveTo(200, 200);  
        context.lineTo(300, 300);  
        context.stroke();  
    }

运行结果：两段的路径颜色分别是红色、蓝色。

发表评论取消回复

表情：

评论列表（有 0 条评论，257人围观）

还没有评论，来说两句吧...

相关阅读

相关 Canvas绘图学习笔记：画笔的路径与状态

beginPath beginPath表示开始一个路径，我们在上一章画弧的时候用到过好多次，他的API非常简单： context.beginPath(); 开

亦凉/ 2024年02月21日 10:06/ 0 赞/ 32 阅读

相关浅谈状态模式

目录背景什么是状态机？状态模式使用状态模式重构业务代码优化实现适用场景扩展与策略模式对比一个通用的状态机模式总结参考资料 ----

梦里梦外;/ 2022年12月23日 00:58/ 0 赞/ 202 阅读

相关浅谈HTML5 canvas（二）

[http://blog.csdn.net/zhouziyu2011/article/details/65682406][http_blog.csdn.net_zhouziyu

╰+攻爆jí腚メ/ 2022年10月01日 04:47/ 0 赞/ 284 阅读

相关浅谈状态模式和状态机

背景与场景描述在开发过程中我们时常需要对程序的不同状态进行切换以及产生不同的行为，通常我们可以使用 if… else 语句来做状态判断处理不同的情况。但是每次新增或者修

矫情吗；*/ 2022年09月11日 06:27/ 0 赞/ 251 阅读

相关浅谈HTML5中的Canvas基本绘图API简易封装和使用(一)

HTML5的Canvas的功能可谓是非常强大，它可以做出很多炫酷的效果，从而更好的增加用户的体验。今天我们就来一起看下HTML5一些常用的API,个人根据实际的使用把它再次进行

Myth丶恋晨/ 2022年07月21日 00:15/ 0 赞/ 286 阅读

相关浅谈HTML5 canvas（一）

HTML5添加的最受欢迎的功能就是<canvas>元素，这个元素负责在页面中设定一个区域，然后就可以通过JavaScript动态在这个区域绘制图形。主流浏览器都支持canv

小咪咪/ 2022年07月05日 15:08/ 0 赞/ 228 阅读

相关浅谈Canvas与SVG

1、SVG SVG 可缩放矢量图形（Scalable Vector Graphics），是一种使用可扩展标记语言（XML）描述2D图形的语言。SVG严格遵从XML语法，并用文

深碍√TFBOYSˉ_/ 2022年06月18日 09:56/ 0 赞/ 258 阅读

相关浅谈Canvas的状态绘图

Canvas是基于状态的绘图。 beginPath核心的作用是：将不同的绘制形态进行隔离，每次执行此方法，表示重新绘制一个路径，与之前绘制的路径可以分开进行样式设置和管理，如

骑猪看日落/ 2022年06月16日 10:11/ 0 赞/ 258 阅读

相关 Canvas绘图

Canvas绘图 Canvas简介 Canvas是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使

爱被打了一巴掌/ 2022年03月15日 01:44/ 0 赞/ 372 阅读

相关浅谈State状态模式

一、前言状态模式在某些场合中使用是非常方便的，什么叫做状态，如果大家学过《编译原理》就会明白DFA M和NFA M，在确定有限状态机和非确定有限状态机中，状态就是最

朱雀/ 2021年08月26日 11:16/ 0 赞/ 445 阅读