canvas绘制线条&canvas实现写字板功能

canvas画V

var canvas = document.querySelector("canvas");
        var ctx = canvas.getContext("2d");
        ctx.strokeStyle = "red";
        //线粗细
        ctx.lineWidth = 10;
        //线两端弧化
        ctx.lineCap = "round";
        //线拐点弧化
        ctx.lineJoin = "round";
        ctx.beginPath();
        //笔头移动到位置
        ctx.moveTo(50,50);
        //划线
        ctx.lineTo(100,100);
        ctx.lineTo(150,50);
        //笔头移动到位置
        ctx.moveTo(200,50);
        ctx.lineTo(250,100);
        ctx.lineTo(300,50);
        //展示,填充笔触
        ctx.stroke();
    </script>

canvas写字板

var canvas = document.querySelector("canvas");
        var ctx = canvas.getContext("2d");
        ctx.strokeStyle = "red";
        //线粗细
        ctx.lineWidth = 10;
        //线两端弧化
        ctx.lineCap = "round";
        //线拐点弧化
        ctx.lineJoin = "round";
        document.addEventListener("mousedown", mouseHandler);
        function mouseHandler(e) {
            switch (e.type) {
                case ‘mousedown‘:
                    //起始绘制位置
                    ctx.moveTo(e.clientX, e.clientY);
                    document.addEventListener("mousemove", mouseHandler);
                    document.addEventListener("mouseup", mouseHandler);
                    break;
                case ‘mousemove‘:
                    ctx.lineTo(e.clientX, e.clientY);
                    ctx.stroke();//画出来
                    break;
                case ‘mouseup‘:
                    document.removeEventListener("mousemove", mouseHandler);
                    document.removeEventListener("mouseup", mouseHandler);
                    break;
            }
        }

效果:

 

 

原文地址:https://www.cnblogs.com/ltfxy/p/12424161.html

时间: 2024-10-12 20:12:57

canvas绘制线条&canvas实现写字板功能的相关文章

使用html5 Canvas绘制线条(直线、折线等)

使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeStyle 用于设置画笔绘制路径的颜色.渐变和模式.该属性的值可以是一个表示css颜色值的字符串.如果你的绘制需求比较复杂,该属性的值还可以是一个CanvasGradient对象或者CanvasPattern对象 globalAlpha 定义绘制内容的透明度,取值在0.0(完全透明)和1.0(完全不透明)之间,默认

html5之canvas画图 1.写字板功能

 写字板事例:       写字板分析:1.点击鼠标開始写字(onmosedown)2.按下鼠标写字(onmousemove)3.松开鼠标,停下写字(撤销onmousemove事件):       代码: <strong><!doctype html> </strong><html> <head> <meta charset="utf-8"> <title>Canvas</title> &l

html5之canvas绘图 1.写字板功能

 写字板事例:       写字板分析:1.点击鼠标开始写字(onmosedown)2.按下鼠标写字(onmousemove)3.松开鼠标,停下写字(撤销onmousemove事件):       代码: <strong><!doctype html> </strong><html> <head> <meta charset="utf-8"> <title>Canvas</title> &l

Canvas绘制线条模糊的解决方案

前段时间,做一个跨平台app项目,需要绘制分时图和K线图.找了很多开源的js的图表库,包括echarts.highcharts等等,都不是很满意,原因有2: 1.太臃肿,我实际上只要一个分时和一个K线图表,最多搭配几个线形图 2.不满足需求.主要就是分时图,国内玩的js图表库,几乎都没有分时图.都是用1分钟线的收盘价线来做的,和中国股民的使用习惯完全不搭界. 多年前有人开源了一个js绘制股票图形的库,叫做html54stock,图像表现上很符合中国人的使用习惯,但是也有问题: 1.封装不好,很多

HTML5 Canvas 学习笔记(canvas绘制线条、矩形、多边形、圆形、圆环、组合图形、文字、自定义图像)

学习资源:http://www.w3school.com.cn/html5/html_5_canvas.asp   http://blog.csdn.net/clh604/article/details/8536059   http://www.jb51.net/html5/70307.html 一.对 canvas 的理解 <canvas>标签是 HTML5 中的新标签,像所有的 dom 对象一样它有自己本身的属性.方法和事件. canvas 是用来在网页上绘制图形的(我们通常称之为画布),

?canvas绘制线条详解

<!DOCTYPE html> <html> <head> <title>canvas详解</title> </head> <body> <canvas id="canvas" width="1024" height="768" style="border:1px solid #aaa;display:block;margin:50 auto;&q

HTML5 canvas绘制线条曲线

HTML5 canvas入门 线条例子 1.简单线条 2.三角形 3.填充三角形背景颜色 4.线条颜色以及线条大小 5.二次贝塞尔曲线 6.三次贝塞尔曲线 <!doctype html> <html> <head> <meta charset="utf-8"/> <meta name="keywords" content="脚本小子_小贝_HTML5_canvas线条"/> <me

[ html canvas 绘制文本 ] canvas绘图实现绘制文本 strokeText fillText方法及textAlign textBaseline font 属性实例演示

1 <!DOCTYPE html> 2 <html lang='zh-cn'> 3 <head> 4 <title>Insert you title</title> 5 <meta name='description' content='this is my page'> 6 <meta name='keywords' content='keyword1,keyword2,keyword3'> 7 <meta htt

[canvas基础]pc&amp;mobile写字板

目的:实现canvas写字板 兼容:同时支持PC和mobile 功能:实现基础的写字板功能,未进行功能拓展,如,画布背景,画笔样式,记录步骤…… 创建时间:2015年7月1日/最后修改时间:2015年7月2日 主要用到的事件:pc:mousedown,mousemove,mouseup, mobile: touchstart,     touchmove,        touchend publicFun: addEventListener <==> removeEventListener,