html5 canvas路径绘制2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基本文件配置</title>
<script src="js/modernizr.js"></script>
</head> <body>
<p>lineCap定义上下文中线的端点：</p> <p>butt端点是垂直于线段边缘的平直边缘</p> <p>round端点是在线段边缘处以线宽为直径的半圆</p> <p>square：端点是在选段边缘处以线宽为长，以一般线宽为宽的矩形</p> <p>lineJoin定义了两条线相交产生的拐角</p> <p>miter 在连接外边缘盐城详解</p> <p>bevel。连接处是一个对角线斜角</p> <p>round。连接处是一个圆</p> <script type="text/javascript">
window.addEventListener('load',eventWindowLoaded,false);
function eventWindowLoaded(){
canvasApp();
}
function canvasSupport(){
return Modernizr.canvas;
}
function canvasApp(){
if(!canvasSupport()){
return;
}else{
var theCanvas = document.getElementById('canvas')
var context = theCanvas.getContext("2d") }
drawScreen();
function drawScreen(){ //圆形端点，斜角连接
context.strokeStyle="pink";
context.lineWidth=10;
context.lineJoin='bevel';
context.lineCap='round';
context.beginPath();
context.moveTo(0,0);
context.lineTo(25,0);
context.lineTo(25,25);
context.stroke();
context.closePath(); //round圆形端点，斜角链接
context.beginPath();
context.moveTo(10,50);
context.lineTo(35,50);
context.lineTo(35,75);
context.stroke();
context.closePath(); //butt平直的端点，round圆形的链接
context.lineJoin='round';
context.lineCap='butt';
context.beginPath();
context.beginPath();
context.moveTo(10,100);
context.lineTo(35,100);
context.lineTo(35,125);
context.stroke();
context.closePath();
}
} </script>
<canvas id="canvas" width="500" height="500">
你的浏览器无法使用canvas
如有疑问加QQ：1035417613;小白童鞋；你的支持是我最大的快乐！！
</canvas>
</body>
</html>
效果如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基本文件配置</title>
<script src="js/modernizr.js"></script>
</head> <body> <script type="text/javascript">
window.addEventListener('load',eventWindowLoaded,false);
function eventWindowLoaded(){
canvasApp();
}
function canvasSupport(){
return Modernizr.canvas;
}
function canvasApp(){
if(!canvasSupport()){
return;
}else{
var theCanvas = document.getElementById('canvas')
var context = theCanvas.getContext("2d") }
drawScreen();
function drawScreen(){ //圆形端点，斜角连接
context.strokeStyle="pink";
context.lineWidth=10;
context.lineJoin='bevel';
context.lineCap='round';
context.beginPath();
context.moveTo(50,20);
context.lineTo(35,100);
context.lineTo(55,150);
context.stroke();
context.closePath(); context.beginPath();
context.moveTo(25,65);
context.lineTo(80,65);
context.stroke();
context.closePath(); context.beginPath();
context.moveTo(75,40);
context.lineTo(60,100);
context.lineTo(30,150);
context.stroke();
context.closePath(); context.beginPath();
context.moveTo(120,20);
context.lineTo(120,150);
context.stroke();
context.closePath(); context.beginPath();
context.moveTo(100,55);
context.lineTo(120,70);
context.stroke();
context.closePath(); context.beginPath();
context.moveTo(100,105);
context.lineTo(120,80);
context.stroke();
context.closePath(); context.beginPath();
context.moveTo(140,20);
context.lineTo(140,150);
context.lineTo(180,150);
context.lineTo(180,120);
context.stroke();
context.closePath(); context.beginPath();
context.moveTo(140,70);
context.lineTo(160,55);
context.stroke();
context.closePath(); context.beginPath();
context.moveTo(140,85);
context.lineTo(160,105);
context.stroke();
context.closePath();
}
} </script>
<canvas id="canvas" width="500" height="500">
你的浏览器无法使用canvas
如有疑问加QQ：1035417613;小白童鞋；你的支持是我最大的快乐！！
</canvas>
</body>
</html>
效果
吐槽一下这字画的竟然和我写的一样丑T_T无语了
html5 canvas路径绘制2的更多相关文章
- HTML5 canvas标签绘制正三角形 鼠标按下点为中间点，鼠标抬起点为其中一个顶点
用html5的canvas标签绘制圆.矩形比较容易,绘制三角形,坐标确定相当于前面两种难点,这里绘制的是正三角形,比较容易,我们只需要把鼠标刚按下去的点设置为三角形的中心点,鼠标抬起的点设置为三角形右 ...
- [js高手之路] html5 canvas教程 - 绘制七巧板
七巧板长什么样? 用canvas把他画出来,其实就是把这7个区域的图形,每个点的坐标找出来,再用moveTo, lineTo连线,设置不同的颜色即可. <head> <meta ch ...
- canvas路径绘制
惯例,先贴代码: 1 /** 2 * Created by Administrator on 2016/1/27. 3 */ 4 function draw (id){ 5 var canvas = ...
- HTML5 Canvas中绘制椭圆的几种方法
1.canvas自带的绘制椭圆的方法 ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)是后来 ...
- [HTML5 Canvas学习]绘制矩形
1.使用strokeRect和fillRect方法绘制矩形 a.strokeRect是绘制一个不填充的矩形 b.fillRect是绘制一个填充的矩形 代码: <script> var ca ...
- HTML5 canvas图像绘制方法与像素操作属性和方法
图像绘制方法 drawImage() 向画布上绘制图像.画布或视频 像素操作属性和方法 width 返回 ImageData ...
- html5 canvas 鼠标绘制
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML5 Canvas ( 图片绘制 转化为base64 ) drawImage,toDataURL
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
随机推荐
- Intellij IDEA 2017 debug断点调试技巧与总结详解篇
转载自csdn----------------------------------------------------------------------https://blog.csdn.net/q ...
- 关于UGUI不拦截射线的方法
起因:开发游戏,要在设置界面里给一个设置项添加一个东西解释这个项是干啥的,要求鼠标移到文字上的时候显示一个弹窗差不多的东西,见动图,鼠标移开会消失.但是当我移动鼠标到弹窗上的时候,UGUI会发射一根射 ...
- PAT题解-1118. Birds in Forest (25)-（并查集模板题）
如题... #include <iostream> #include <cstdio> #include <algorithm> #include <stri ...
- Redis学习笔记之入门基础知识——其他特性
1.订阅(subscribe)与发布(publish) 用户订阅某一个频道,频道发布新的信息时,会将信息告知用户 2.数据安全 1) 快照持久化(时间点转储,实质是数据副本) 操作:SAVA. ...
- 《Spring2之站立会议10》
<Spring2之站立会议10> 昨天,添加完了表情库: 今天,对整个项目进行了测试: 遇到的问题:测试后觉得有些方面还不足,需要进一步改进.
- 关于打包ipa文件以及苹果证书的若干问题
占位 包括windows下生成p12证书,以及apicloud云编译报错等内容.有空更新 http://www.applicationloader.net/blog/zh/2050.html?tdso ...
- linux 修改终端颜色
要想修改终端的颜色,可以使用修改PS1环境变量的方式,也可以通过命令setterm来进行设置. 一.PS1 转自:修改linux终端命令行颜色 1.PS1 要修改linux终端命令行颜色,我们需要用到 ...
- 【版本管理】git分支管理
创建与合并分支: 首先,我们创建dev分支,然后切换到dev分支: git checkout -b dev,命令加上-b参数表示创建并切换, 相当于以下两条命令: git branch dev: gi ...
- Spring MVC 异步测试
从spring3.2开始,支持servlet3的异步请求,这对于处理耗时的请求如缓慢的数据库查询是非常有好处的,不至于很快的耗光servlet的线程池,影响可扩展性. 让我们先来了解一下servlet ...
- 【枚举Day1】20170529-2枚举算法专题练习 题解
题目: http://www.cnblogs.com/ljc20020730/p/6918328.html 评测器:cena 评测记录: 1.OneMoreRectangle 一个矩形 ●如果任意枚举 ...